chore: use vitest and update msw

examples/next-js/eslint.config.mjs

@@ -2,13 +2,13 @@ import eslintReact from '@eslint-react/eslint-plugin'
 import eslintConfig from '@lynxtaa/eslint-config'
 import requiresTypechecking from '@lynxtaa/eslint-config/requires-typechecking'
 import nextPlugin from '@next/eslint-plugin-next'
-import jest from 'eslint-plugin-jest'
+import vitest from '@vitest/eslint-plugin'
 import hooksPlugin from 'eslint-plugin-react-hooks'
 
 export default [
 	...eslintConfig,
 	...requiresTypechecking,
-	jest.configs['flat/recommended'],
+	vitest.configs.recommended,
 	{
 		files: ['**/*.ts', '**/*.tsx'],
 		plugins: {

examples/next-js/package.json

@@ -9,11 +9,11 @@
     "dev": "next dev",
     "format": "pnpm run prettier --write",
     "gql-codegen": "graphql-codegen --config graphql-codegen.ts",
-    "lint": "eslint --max-warnings 0 jest lib pages tests",
+    "lint": "eslint --max-warnings 0 lib pages tests test-utils",
     "prettier": "prettier \"{lib,pages,tests}/**\" *.{js,ts,json,md}",
     "start": "next start",
-    "test": "jest",
-    "test:coverage": "jest --coverage"
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "prettier": "@lynxtaa/prettier-config",
   "dependencies": {
@@ -35,18 +35,19 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@types/jest": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "19.2.17",
+    "@vitejs/plugin-react": "6.0.3",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/eslint-plugin": "catalog:",
     "eslint": "catalog:",
-    "eslint-plugin-jest": "29.15.2",
     "eslint-plugin-react-hooks": "7.1.1",
     "graphql": "16.14.2",
-    "jest": "catalog:",
-    "msw": "1.3.5",
+    "jsdom": "catalog:",
+    "msw": "2.15.0",
     "prettier": "catalog:",
     "typescript": "catalog:",
     "typescript-7": "catalog:",
-    "whatwg-fetch": "3.6.20"
+    "vitest": "catalog:"
   }
 }

examples/next-js/test-utils/setupTests.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom/vitest'
+
+import { server } from './testServer'
+
+// Start before the test module (and thus graphQLClient) is imported, since the
+// client binds globalThis.fetch on construction — msw must patch it beforehand.
+server.listen({ onUnhandledRequest: 'error' })
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())

examples/next-js/test-utils/testServer.ts

@@ -0,0 +1,4 @@
+export { graphql, http, HttpResponse } from 'msw'
+import { setupServer, type SetupServer } from 'msw/node'
+
+export const server: SetupServer = setupServer()

examples/next-js/tests/index.test.tsx

@@ -2,12 +2,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
-import { server, graphql } from '../jest/testServer'
 import {
 	type GetCharactersQuery,
 	type GetCharactersQueryVariables,
 } from '../lib/graphql-queries'
 import Home from '../pages/index'
+import { server, graphql, HttpResponse } from '../test-utils/testServer'
 
 const withProvider = ({ children }: { children?: React.ReactNode }) => (
 	<QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>
@@ -17,21 +17,21 @@ it('renders and filters list', async () => {
 	server.use(
 		graphql.query<GetCharactersQuery, GetCharactersQueryVariables>(
 			'GetCharacters',
-			async (req, res, ctx) =>
-				res(
-					ctx.data({
+			({ variables }) =>
+				HttpResponse.json({
+					data: {
 						characters: {
 							results: [
 								{ id: '1', name: 'Rick Sanchez' },
 								{ id: '2', name: 'Jerry Smith' },
 								{ id: '3', name: 'Summer Smith' },
 								{ id: '4', name: 'Birdperson' },
 							]
-								.filter(character => character.name.includes(req.variables.name ?? ''))
+								.filter(character => character.name.includes(variables.name ?? ''))
 								.slice(0, 3),
 						},
-					}),
-				),
+					},
+				}),
 		),
 	)
 

examples/next-js/vitest.config.ts

@@ -0,0 +1,23 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config'
+
+const isCI = process.env.CI !== undefined
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		globals: true,
+		environment: 'jsdom',
+		mockReset: true,
+		setupFiles: ['./test-utils/setupTests.ts'],
+		snapshotFormat: {
+			escapeString: false,
+			printBasicPrototype: false,
+		},
+		coverage: {
+			reporter: isCI
+				? ['html', 'text', 'text-summary', 'cobertura']
+				: ['html', 'text-summary'],
+		},
+	},
+})

examples/next-js/vitest.d.ts

@@ -0,0 +1 @@
+/// <reference types="vitest/globals" />

packages/awesome-graphql-client/eslint.config.mjs

@@ -1,11 +1,17 @@
 import eslintConfig from '@lynxtaa/eslint-config'
 import requiresTypechecking from '@lynxtaa/eslint-config/requires-typechecking'
-import jest from 'eslint-plugin-jest'
+import vitest from '@vitest/eslint-plugin'
 
 export default [
 	...eslintConfig,
 	...requiresTypechecking,
-	jest.configs['flat/recommended'],
+	vitest.configs.recommended,
+	{
+		rules: {
+			// false positive on `expect.any()` asymmetric matchers (collides with chai `.any` chain)
+			'vitest/valid-expect': 'off',
+		},
+	},
 	{
 		languageOptions: {
 			parserOptions: {

packages/awesome-graphql-client/package.json

@@ -43,31 +43,26 @@
     "prepublishOnly": "pnpm run build && cp ../../README.md .",
     "prettier": "prettier \"{src,test}/**/*\" \"*.{js,json,md}\"",
     "release": "np --no-cleanup --test-script lint",
-    "test": "is-ci-cli \"test:coverage\" \"test:watch\"",
-    "test:coverage": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
-    "test:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
     "validate": "pnpm run check-format && pnpm run check-types && pnpm run lint"
   },
   "prettier": "@lynxtaa/prettier-config",
   "devDependencies": {
     "@graphql-typed-document-node/core": "3.2.0",
-    "@jest/globals": "30.4.1",
     "@lynxtaa/eslint-config": "catalog:",
     "@lynxtaa/prettier-config": "catalog:",
-    "@swc/core": "1.15.43",
-    "@swc/jest": "0.2.39",
-    "@types/jest": "catalog:",
     "@types/node": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/eslint-plugin": "catalog:",
     "eslint": "catalog:",
-    "eslint-plugin-jest": "29.15.2",
     "fastify": "5.8.5",
     "graphql": "16.14.2",
     "graphql-tag": "2.12.7",
     "graphql-upload-minimal": "1.6.4",
     "http-terminator": "3.2.0",
-    "is-ci-cli": "2.2.0",
-    "jest": "catalog:",
-    "jest-environment-jsdom": "catalog:",
+    "jsdom": "catalog:",
     "mercurius": "16.9.0",
     "mercurius-upload": "8.0.0",
     "np": "11.2.1",
@@ -76,6 +71,7 @@
     "typescript": "catalog:",
     "typescript-7": "catalog:",
     "undici": "8.5.0",
+    "vitest": "catalog:",
     "whatwg-fetch": "3.6.20"
   },
   "engines": {

packages/awesome-graphql-client/src/AwesomeGraphQLClient.ts

@@ -1,4 +1,4 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core'
 
 import { GraphQLRequestError } from './GraphQLRequestError'
 import { assert } from './util/assert'

packages/awesome-graphql-client/src/util/extractFiles.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+// @vitest-environment jsdom
 
 import { extractFiles } from './extractFiles'
 import { isFileUpload } from './isFileUpload'

packages/awesome-graphql-client/src/util/normalizeHeaders.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment jsdom
- */
+// @vitest-environment jsdom
 
 import { normalizeHeaders } from './normalizeHeaders'
 

packages/awesome-graphql-client/test/browser.test.ts

@@ -1,19 +1,18 @@
-/**
- * @jest-environment jsdom
- */
+// @vitest-environment jsdom
+
 import { type IncomingHttpHeaders } from 'node:http'
 
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
-import { jest } from '@jest/globals'
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core'
 import { print, type DocumentNode } from 'graphql'
 import graphqlTag from 'graphql-tag'
 import { GraphQLUpload, type FileUpload } from 'graphql-upload-minimal'
 import { mercurius } from 'mercurius'
+import { vi } from 'vitest'
 
 import { AwesomeGraphQLClient, GraphQLRequestError } from '../src/index'
 import { gql } from '../src/util/gql'
 
-import { createServer, type TestServer } from './jest/gqlServer'
+import { createServer, type TestServer } from './helpers/gqlServer'
 import { streamToString } from './streamToString'
 
 let server: TestServer
@@ -22,10 +21,12 @@ afterEach(async () => {
 	await server?.destroy()
 })
 
-if (typeof fetch === 'undefined') {
-	// @ts-expect-error Just a polyfill, no need types
-	await import('whatwg-fetch')
-}
+// vitest's jsdom exposes Node's undici fetch, which can't stream a jsdom File
+// upload. Drop it so the XHR-based whatwg-fetch polyfill installs, matching a browser.
+// @ts-expect-error deleting global fetch
+delete globalThis.fetch
+// @ts-expect-error Just a polyfill, no need types
+await import('whatwg-fetch')
 
 it('sends GraphQL request without variables', async () => {
 	interface GetUsers {
@@ -650,7 +651,7 @@ it('calls onError hook if provided', async () => {
 		},
 	)
 
-	const onError = jest.fn()
+	const onError = vi.fn()
 
 	const client = new AwesomeGraphQLClient({ endpoint: server.endpoint, onError })
 
@@ -684,7 +685,7 @@ it('ignores errors thrown inside onError hook', async () => {
 		},
 	)
 
-	const onError = jest.fn().mockImplementation(() => {
+	const onError = vi.fn().mockImplementation(() => {
 		throw new Error('💣')
 	})
 

packages/awesome-graphql-client/test/node.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment node
- */
+// @vitest-environment node
 
 import { readFileSync } from 'node:fs'
 
@@ -9,7 +7,7 @@ import { GraphQLUpload, type FileUpload } from 'graphql-upload-minimal'
 import { AwesomeGraphQLClient } from '../src/index'
 import { gql } from '../src/util/gql'
 
-import { createServer, type TestServer } from './jest/gqlServer'
+import { createServer, type TestServer } from './helpers/gqlServer'
 import { streamToString } from './streamToString'
 
 let server: TestServer

packages/awesome-graphql-client/test/typescript.ts

@@ -1,7 +1,3 @@
-/**
- * @jest-environment node
- */
-
 /* eslint-disable no-console */
 
 import {

packages/awesome-graphql-client/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"isolatedDeclarations": true,
 		"declaration": true,
-		"types": ["node", "jest"]
+		"types": ["node", "vitest/globals"]
 	},
 	"include": ["src", "test", "./tsup.config.ts"]
 }

packages/awesome-graphql-client/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+
+const isCI = process.env.CI !== undefined
+
+export default defineConfig({
+	test: {
+		globals: true,
+		environment: 'node',
+		mockReset: true,
+		setupFiles: ['./test/setupTests.ts'],
+		coverage: {
+			provider: 'v8',
+			include: ['src/**'],
+			reporter: isCI ? ['clover', 'json', 'lcov', 'text'] : ['html', 'text-summary'],
+		},
+	},
+})