[2/3] [v3] migrate graphiql from jest to vitest (#3825)

* [skip ci] * fix * migrate `graphiql` from `jest` to `vitest` * add .js extension * add .js extension * upd * upd * upd * upd * upd * upd
graphql · Dec 14, 2024 · 7cdcabf · 7cdcabf
1 parent 72f06bc
commit 7cdcabf
Show file tree

Hide file tree

Showing 23 changed files with 284 additions and 274 deletions.
diff --git a/.changeset/sour-onions-rhyme.md b/.changeset/sour-onions-rhyme.md
@@ -0,0 +1,6 @@
+---
+'codemirror-graphql': minor
+'graphiql': minor
+---
+
+migrate `graphiql` from `jest` to `vitest`
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -424,7 +424,13 @@ module.exports = {
     },
     {
       // Rule for ignoring imported dependencies from tests files
-      files: ['**/__tests__/**', 'webpack.config.js', '**/tests/**'],
+      files: [
+        '**/__tests__/**',
+        'webpack.config.js',
+        '**/tests/**',
+        'test.config.js',
+        'vitest.config.mts',
+      ],
       rules: {
         'import-x/no-extraneous-dependencies': 'off',
       },

diff --git a/jest.config.base.js b/jest.config.base.js
@@ -17,19 +17,14 @@ module.exports = (dir, env = 'jsdom') => {
     coverageDirectory: `${__dirname}/coverage/jest`,
     setupFilesAfterEnv,
     moduleNameMapper: {
-      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-        'identity-obj-proxy',
-      '\\.(css|less)$': 'identity-obj-proxy',
+      '\\.css$': 'identity-obj-proxy',
       '^graphql-language-service-([^/]+)': `${__dirname}/packages/graphql-language-service/src/$1`,
       '^graphql-language-([^/]+)': `${__dirname}/packages/graphql-language-$1/src`,
       '^@graphiql\\/([^/]+)': `${__dirname}/packages/graphiql-$1/src`,
-      '^@graphiql-plugins\\/([^/]+)': `${__dirname}/plugins/$1/src`,
       '^codemirror-graphql\\/esm([^]+)\\.js': `${__dirname}/packages/codemirror-graphql/src/$1`,
       '^codemirror-graphql\\/cjs([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
       // relies on compilation
       '^cm6-graphql\\/src\\/([^]+)': `${__dirname}/packages/cm6-graphql/dist/$1`,
-      '^example-([^/]+)': `${__dirname}/examples/$1/src`,
-      '^-!svg-react-loader.*$': '<rootDir>/resources/jest/svgImportMock.js',
       // because of the svelte compiler's export patterns i guess?
       'svelte/compiler': `${__dirname}/node_modules/svelte/compiler.cjs`,
     },

diff --git a/package.json b/package.json
@@ -96,7 +96,6 @@
     "@manypkg/get-packages": "^1.1.3",
     "@shopify/eslint-plugin": "^45.0.0",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
-    "@testing-library/jest-dom": "5.16.5",
     "@types/codemirror": "^0.0.90",
     "@types/express": "^4.17.11",
     "@types/fetch-mock": "^7.3.2",
@@ -137,7 +136,7 @@
     "ts-jest": "^27.1.5",
     "typedoc": "^0.19.2",
     "typescript": "^4.6.3",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.8",
     "wgutils": "^0.1.7",
     "wsrun": "^5.2.4"
   },

diff --git a/packages/codemirror-graphql/src/hint.ts b/packages/codemirror-graphql/src/hint.ts
@@ -10,7 +10,7 @@
  */
 
 import CodeMirror, { Hints, Hint } from 'codemirror';
-import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.js';
 
 import { FragmentDefinitionNode, GraphQLSchema, GraphQLType } from 'graphql';
 import type {

diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -66,8 +66,10 @@
     "set-value": "^4.1.0"
   },
   "devDependencies": {
+    "@types/react-dom": "^18.3.1",
     "@babel/helper-string-parser": "^7.19.4",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/markdown-it": "^14.1.2",
     "@types/get-value": "^3.0.5",
     "@types/set-value": "^4.0.1",

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

diff --git a/packages/graphiql/__mocks__/codemirror.ts b/packages/graphiql/__mocks__/codemirror.ts
@@ -13,9 +13,7 @@ function CodeMirror(node: HTMLElement, { value, ...options }) {
   node.append(mockWrapper);
 
   function _emit(event, data) {
-    if (_eventListeners[event]) {
-      _eventListeners[event](data);
-    }
+    _eventListeners[event]?.(data);
   }
 
   return {
@@ -30,11 +28,9 @@ function CodeMirror(node: HTMLElement, { value, ...options }) {
         linterOptions: {},
       },
     },
-
     on(event, handler) {
       _eventListeners[event] = handler;
     },
-
     off(event) {
       if (!Object.prototype.hasOwnProperty.call(_eventListeners, event)) {
         return;
@@ -47,29 +43,23 @@ function CodeMirror(node: HTMLElement, { value, ...options }) {
       }
       _eventListeners = updatedEventListeners;
     },
-
     getValue() {
       return mockTextArea.value;
     },
-
     setValue(newValue) {
       mockTextArea.value = newValue;
     },
     addKeyMap() {},
     removeKeyMap() {},
     setOption() {},
     refresh() {},
-    setSize() {},
-
     emit: _emit,
   };
 }
 
-CodeMirror.defineExtension = () => {};
 CodeMirror.registerHelper = () => {};
 CodeMirror.defineOption = () => {};
 CodeMirror.defineMode = () => {};
-
 CodeMirror.signal = (mockCodeMirror, event, ...args) => {
   mockCodeMirror.emit(event, ...args);
 };

diff --git a/packages/graphiql/__mocks__/svg.jsx b/packages/graphiql/__mocks__/svg.jsx
diff --git a/packages/graphiql/jest.config.js b/packages/graphiql/jest.config.js
diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -44,7 +44,8 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
-    "webpack": "webpack-cli --config resources/webpack.config.js"
+    "webpack": "webpack-cli --config resources/webpack.config.js",
+    "test": "vitest"
   },
   "dependencies": {
     "@graphiql/react": "^0.27.0"
@@ -56,9 +57,8 @@
   },
   "devDependencies": {
     "@graphiql/toolkit": "^0.11.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.0.0",
-    "@types/testing-library__jest-dom": "5.14.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
     "cross-env": "^7.0.2",

diff --git a/packages/graphiql/postcss.config.js b/packages/graphiql/postcss.config.js
@@ -1,9 +1,13 @@
-module.exports = ({ options, webpackLoaderContext }) => ({
-  plugins: {
-    // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
-    'postcss-import': { root: webpackLoaderContext.context },
-    // contains autoprefixer, etc
-    'postcss-preset-env': options['postcss-preset-env'] || false,
-    cssnano: process.env.NODE_ENV === 'production' ? options.cssnano : false,
-  },
-});
+module.exports =
+  process.env.NODE_ENV === 'test'
+    ? {}
+    : ({ options, webpackLoaderContext }) => ({
+        plugins: {
+          // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
+          'postcss-import': { root: webpackLoaderContext.context },
+          // contains autoprefixer, etc
+          'postcss-preset-env': options['postcss-preset-env'] || false,
+          cssnano:
+            process.env.NODE_ENV === 'production' ? options.cssnano : false,
+        },
+      });
diff --git a/packages/graphiql/setup-files.ts b/packages/graphiql/setup-files.ts
@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+
+// @ts-expect-error
+document.createRange = function () {
+  return {
+    setEnd() {},
+    setStart() {},
+    getClientRects() {
+      return { top: 0, bottom: 0, left: 0, right: 0 };
+    },
+    getBoundingClientRect() {
+      return { right: 0 };
+    },
+  };
+};
diff --git a/...rc/components/__tests__/GraphiQL.spec.tsx → packages/graphiql/src/GraphiQL.spec.tsx b/...rc/components/__tests__/GraphiQL.spec.tsx → packages/graphiql/src/GraphiQL.spec.tsx
@@ -4,10 +4,9 @@
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
  */
-import '@testing-library/jest-dom';
 import { act, render, waitFor, fireEvent } from '@testing-library/react';
-import React from 'react';
-import { GraphiQL } from '../GraphiQL';
+import React, { Component } from 'react';
+import { GraphiQL } from './GraphiQL';
 import { Fetcher } from '@graphiql/toolkit';
 import { ToolbarButton } from '@graphiql/react';
 
@@ -37,7 +36,7 @@ describe('GraphiQL', () => {
 
   describe('fetcher', () => {
     it('should throw error without fetcher', () => {
-      const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
       // @ts-expect-error fetcher is a required prop to GraphiQL
       expect(() => render(<GraphiQL />)).toThrow(
@@ -273,13 +272,12 @@ describe('GraphiQL', () => {
   describe('panel resizing', () => {
     it('readjusts the query wrapper flex style field when the result panel is resized', async () => {
       // Mock the drag bar width
-      const clientWidthSpy = jest
+      const clientWidthSpy = vi
         .spyOn(Element.prototype, 'clientWidth', 'get')
         .mockReturnValue(0);
       // Mock the container width
-      const boundingClientRectSpy = jest
+      const boundingClientRectSpy = vi
         .spyOn(Element.prototype, 'getBoundingClientRect')
-        // @ts-expect-error missing properties from type 'DOMRect'
         .mockReturnValue({ left: 0, right: 900 });
 
       const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
@@ -312,13 +310,12 @@ describe('GraphiQL', () => {
 
     it('allows for resizing the doc explorer correctly', async () => {
       // Mock the drag bar width
-      const clientWidthSpy = jest
+      const clientWidthSpy = vi
         .spyOn(Element.prototype, 'clientWidth', 'get')
         .mockReturnValue(0);
       // Mock the container width
-      const boundingClientRectSpy = jest
+      const boundingClientRectSpy = vi
         .spyOn(Element.prototype, 'getBoundingClientRect')
-        // @ts-expect-error missing properties from type 'DOMRect'
         .mockReturnValue({ left: 0, right: 1200 });
 
       const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
@@ -529,10 +526,10 @@ describe('GraphiQL', () => {
 
     it('properly ignores fragments', async () => {
       const myFragment = (
-        <React.Fragment>
+        <>
           <MyFunctionalComponent />
           <MyFunctionalComponent />
-        </React.Fragment>
+        </>
       );
 
       const { container, getByRole } = render(
@@ -566,7 +563,7 @@ describe('GraphiQL', () => {
 
     it('properly ignores non-override class components', async () => {
       // eslint-disable-next-line react/prefer-stateless-function
-      class MyClassComponent extends React.Component {
+      class MyClassComponent extends Component {
         render() {
           return null;
         }

diff --git a/...ages/graphiql/src/components/GraphiQL.tsx → packages/graphiql/src/GraphiQL.tsx b/...ages/graphiql/src/components/GraphiQL.tsx → packages/graphiql/src/GraphiQL.tsx
diff --git a/packages/graphiql/src/cdn.ts b/packages/graphiql/src/cdn.ts
@@ -7,7 +7,7 @@
 import * as GraphiQLReact from '@graphiql/react';
 import { createGraphiQLFetcher, createLocalStorage } from '@graphiql/toolkit';
 import * as GraphQL from 'graphql';
-import { GraphiQL } from './components/GraphiQL';
+import { GraphiQL } from './GraphiQL';
 
 import '@graphiql/react/font/roboto.css';
 import '@graphiql/react/font/fira-code.css';

diff --git a/packages/graphiql/src/index.ts b/packages/graphiql/src/index.ts
@@ -14,14 +14,7 @@ export { GraphiQLProvider } from '@graphiql/react';
 /**
  * Definitions
  */
-export type {
-  GraphiQLProps,
-  GraphiQLInterfaceProps,
-} from './components/GraphiQL';
+export type { GraphiQLProps, GraphiQLInterfaceProps } from './GraphiQL';
 export type { GraphiQLProviderProps } from '@graphiql/react';
 
-export {
-  GraphiQLInterface,
-  GraphiQL,
-  GraphiQL as default,
-} from './components/GraphiQL';
+export { GraphiQLInterface, GraphiQL, GraphiQL as default } from './GraphiQL';
diff --git a/packages/graphiql/tsconfig.esm.json b/packages/graphiql/tsconfig.esm.json
@@ -6,17 +6,11 @@
     "composite": false,
     "jsx": "react",
     "baseUrl": ".",
-    "target": "es5"
+    "target": "es5",
+    "types": ["@testing-library/jest-dom", "vitest/globals"]
   },
   "include": ["src"],
-  "exclude": [
-    "**/__tests__/**",
-    "**/dist/**.*",
-    "**/*.spec.ts",
-    "**/*.spec.js",
-    "**/*-test.ts",
-    "**/*-test.js"
-  ],
+  "exclude": ["**/*.spec.tsx"],
   "references": [
     {
       "path": "../codemirror-graphql"

diff --git a/packages/graphiql/tsconfig.json b/packages/graphiql/tsconfig.json
@@ -6,10 +6,11 @@
     "composite": true,
     "jsx": "react",
     "target": "es5",
-    "strictPropertyInitialization": false
+    "strictPropertyInitialization": false,
+    "types": ["@testing-library/jest-dom", "vitest/globals"]
   },
   "include": ["src"],
-  "exclude": ["**/__tests__/**", "**/dist/**.*", "cypress/**"],
+  "exclude": ["**/*.spec.tsx"],
   "references": [
     {
       "path": "../codemirror-graphql"

diff --git a/packages/graphiql/vitest.config.mts b/packages/graphiql/vitest.config.mts
@@ -0,0 +1,30 @@
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+const mockedCodemirror = path.resolve('__mocks__', 'codemirror.ts');
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./setup-files.ts'],
+    alias: {
+      'codemirror/addon/edit/matchbrackets.js': mockedCodemirror,
+      'codemirror/addon/hint/show-hint.js': mockedCodemirror,
+      'codemirror/addon/edit/closebrackets.js': mockedCodemirror,
+      'codemirror/addon/fold/brace-fold.js': mockedCodemirror,
+      'codemirror/addon/fold/foldgutter.js': mockedCodemirror,
+      'codemirror/addon/lint/lint.js': mockedCodemirror,
+      'codemirror/addon/search/searchcursor.js': mockedCodemirror,
+      'codemirror/addon/search/jump-to-line.js': mockedCodemirror,
+      'codemirror/addon/dialog/dialog.js': mockedCodemirror,
+      'codemirror/keymap/sublime.js': mockedCodemirror,
+      'codemirror/mode/javascript/javascript.js': mockedCodemirror,
+      'codemirror/addon/comment/comment.js': mockedCodemirror,
+      'codemirror/addon/search/search.js': mockedCodemirror,
+      codemirror: mockedCodemirror,
+    },
+  },
+});