migrate @graphiql/react to vitest (#3829)

* aa

* aa

* aa

* aa

* rm

* fix lint

.eslintrc.js

@@ -333,7 +333,14 @@ module.exports = {
         'unicorn/prefer-node-protocol': 'error',
         'import-x/no-unresolved': [
           'error',
-          { ignore: ['^node:', '\\.svg\\?react$', 'vitest/config'] },
+          {
+            ignore: [
+              '^node:',
+              '\\.svg\\?react$',
+              'vitest/config',
+              './vite.config.mjs',
+            ],
+          },
         ],
         'no-extra-boolean-cast': [
           'error',
@@ -430,6 +437,7 @@ module.exports = {
         '**/tests/**',
         'test.config.js',
         'vitest.config.mts',
+        'setup-files.ts',
       ],
       rules: {
         'import-x/no-extraneous-dependencies': 'off',

packages/graphiql-react/package.json

@@ -40,7 +40,8 @@
   "scripts": {
     "prebuild": "rimraf dist types",
     "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
-    "build": "tsc --emitDeclarationOnly && vite build"
+    "build": "tsc --emitDeclarationOnly && vite build",
+    "test": "vitest"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",

packages/graphiql-react/setup-files.ts

@@ -0,0 +1,3 @@
+'use no memo';
+
+import '@testing-library/jest-dom';

packages/graphiql-react/src/editor/__tests__/common.spec.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { importCodeMirror } from '../common';
 
 describe('importCodeMirror', () => {

packages/graphiql-react/src/editor/__tests__/tabs.spec.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { StorageAPI } from '@graphiql/toolkit';
 import {
   createTab,

packages/graphiql-react/src/editor/__tests__/whitespace.spec.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { invalidCharacters, normalizeWhitespace } from '../whitespace';
 
 describe('normalizeWhitespace', () => {

packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
 import { useContext, useEffect } from 'react';

packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
 

packages/graphiql-react/src/explorer/components/__tests__/test-utils.ts

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { GraphQLNamedType, GraphQLType } from 'graphql';
 
 import { ExplorerContextType, ExplorerNavStackItem } from '../../context';

packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { fireEvent, render } from '@testing-library/react';
 import {
   GraphQLBoolean,

packages/graphiql-react/src/explorer/components/__tests__/type-link.spec.tsx

@@ -1,3 +1,5 @@
+'use no memo';
+
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLNonNull, GraphQLList, GraphQLString } from 'graphql';
 import { ComponentProps } from 'react';

packages/graphiql-react/src/history/__tests__/components.spec.tsx

@@ -1,14 +1,17 @@
+'use no memo';
+
+import { Mock } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
 import { ComponentProps } from 'react';
 import { formatQuery, HistoryItem } from '../components';
 import { HistoryContextProvider } from '../context';
 import { useEditorContext } from '../../editor';
 import { Tooltip } from '../../ui';
 
-jest.mock('../../editor', () => {
-  const mockedSetQueryEditor = jest.fn();
-  const mockedSetVariableEditor = jest.fn();
-  const mockedSetHeaderEditor = jest.fn();
+vi.mock('../../editor', () => {
+  const mockedSetQueryEditor = vi.fn();
+  const mockedSetVariableEditor = vi.fn();
+  const mockedSetHeaderEditor = vi.fn();
   return {
     useEditorContext() {
       return {
@@ -66,12 +69,12 @@ function getMockProps(
 }
 
 describe('QueryHistoryItem', () => {
-  const mockedSetQueryEditor = useEditorContext()?.queryEditor
-    ?.setValue as jest.Mock;
-  const mockedSetVariableEditor = useEditorContext()?.variableEditor
-    ?.setValue as jest.Mock;
-  const mockedSetHeaderEditor = useEditorContext()?.headerEditor
-    ?.setValue as jest.Mock;
+  const mockedSetQueryEditor = useEditorContext()!.queryEditor!
+    .setValue as Mock;
+  const mockedSetVariableEditor = useEditorContext()!.variableEditor!
+    .setValue as Mock;
+  const mockedSetHeaderEditor = useEditorContext()!.headerEditor!
+    .setValue as Mock;
   beforeEach(() => {
     mockedSetQueryEditor.mockClear();
     mockedSetVariableEditor.mockClear();

packages/graphiql-react/tsconfig.json

@@ -16,8 +16,7 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationDir": "types",
-    "outDir": "tsc",
-    "types": ["jest", "@testing-library/jest-dom"]
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

packages/graphiql-react/vite.config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig, PluginOption } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import postCssNestingPlugin from 'postcss-nesting';
@@ -7,24 +7,28 @@ import packageJSON from './package.json';
 const ReactCompilerConfig = {
   target: '17',
   sources(filename) {
+    if (filename.includes('__tests__')) {
+      return false;
+    }
     return filename.includes('graphiql-react');
   },
 };
 
+export const plugins: PluginOption[] = [
+  react({
+    babel: {
+      plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+    },
+  }),
+  svgr({
+    svgrOptions: {
+      titleProp: true,
+    },
+  }),
+];
+
 export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
-      },
-    }),
-    svgr({
-      exportAsDefault: true,
-      svgrOptions: {
-        titleProp: true,
-      },
-    }),
-  ],
+  plugins,
   css: {
     postcss: {
       plugins: [postCssNestingPlugin()],

packages/graphiql-react/vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import { plugins } from './vite.config.mjs';
+
+export default defineConfig({
+  plugins,
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./setup-files.ts'],
+  },
+});

tsconfig.eslint.json

@@ -12,14 +12,13 @@
     "packages/*/vite.config.mts",
     "packages/*/vitest.config.mts",
     "examples/*/vite.config.ts",
-    "packages/graphiql/setup-files.ts",
+    "packages/*/setup-files.ts",
     "packages/graphiql/src/*.spec.tsx",
     "packages/cm6-graphql/__tests__/**/*.ts",
     "packages/graphql-language-service/benchmark/index.ts",
     "packages/graphiql/cypress.config.ts",
     "packages/graphiql/__mocks__/codemirror.ts",
     "packages/monaco-graphql/test/*.test.ts",
-    "packages/graphiql-react/vite.config.d.ts",
     "packages/vscode-graphql-syntax/tests/**/*.ts",
     "packages/vscode-graphql-syntax/serializer.ts"
   ]