test: add tests

Author: Hebilicious

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.4",
     "@antfu/ni": "^0.21.3",
+    "@nuxt/test-utils": "^3.5.2",
     "@types/node": "^18.16.16",
     "bumpp": "^9.1.0",
     "conventional-changelog-cli": "^2.2.2",

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query"
+
+const { data, suspense } = useQuery({
+  queryKey: ["todos"],
+  queryFn: () => $fetch("/api/todos")
+})
+
+onServerPrefetch(async () => {
+  await suspense()
+})
+</script>
+
+<template>
+  <pre>
+    {{ data }}
+  </pre>
+</template>

test/fixtures/todos/app.vue

@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  modules: ["../../../packages/vue-query-nuxt/src/module.ts"]
+})

test/fixtures/todos/nuxt.config.ts

@@ -0,0 +1,8 @@
+{
+  "name": "basic-fixture",
+  "private": true,
+  "dependencies": {
+    "@tanstack/vue-query": "latest",
+    "nuxt": "latest"
+  }
+}

test/fixtures/todos/package.json

@@ -0,0 +1,3 @@
+export default defineEventHandler(() => {
+  return [{ id: 1, todo: "Hello" }, { id: 2, todo: "World" }]
+})

test/fixtures/todos/server/api/todos.ts

@@ -0,0 +1,16 @@
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { $fetch, setup } from "@nuxt/test-utils"
+
+describe("vue-query", async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL("./fixtures/todos", import.meta.url))
+  })
+
+  it("renders the todos", async () => {
+    // Get response to a server-rendered page with `$fetch`.
+    const html = await $fetch("/")
+    expect(html).toContain("Hello")
+    expect(html).toContain("World")
+  })
+})