fix: restore tests without build workflow (#3246)

.github/workflows/pr-graphql-compat-check.yml

@@ -38,11 +38,8 @@ jobs:
 
       - run: yarn install --frozen-lockfile --immutable
 
-      - name: Typescript Build
-        run: yarn build
-
       - name: Unit Tests
-        run: yarn test
+        run: yarn test:ci
 
       - name: Cypress
         run: yarn e2e

.github/workflows/pr-tests.yml

@@ -21,11 +21,8 @@ jobs:
           cache: 'yarn'
       - run: yarn install --frozen-lockfile --immutable
 
-      - name: Build
-        run: yarn build
-
       - name: Run Unit Tests
-        run: yarn test --coverage
+        run: yarn test:ci --coverage
 
       - uses: codecov/codecov-action@v3
         with:

.gitignore

@@ -14,6 +14,7 @@ packages/**/dist/.npmignore
 packages/graphiql/typedoc
 dist
 esm
+cjs
 bundle
 *.vsix
 

jest.config.base.js

@@ -22,9 +22,14 @@ module.exports = (dir, env = 'jsdom') => {
       '\\.(css|less)$': '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\\/([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
+      '^codemirror-graphql\\/esm([^]+)': `${__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',
     },
     testMatch: ['**/*[-.](spec|test).[jt]s?(x)', '!**/cypress/**'],
     testEnvironment: env,
@@ -38,7 +43,6 @@ module.exports = (dir, env = 'jsdom') => {
       'resources',
       'test',
       'examples',
-      'graphiql-2-rfc-context',
       '.d.ts',
       'types.ts',
     ],

package.json

@@ -33,7 +33,7 @@
     "build": "yarn build:clean && yarn build:cm6-graphql && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql-plugin-code-exporter && yarn build:graphiql",
     "build-bundles": "yarn prebuild-bundles && wsrun -p -m -s build-bundles",
     "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql run build-bundles-clean",
-    "build-clean": "wsrun -m build-clean ",
+    "build-clean": "wsrun -m build-clean",
     "build-demo": "wsrun -m -s build-demo",
     "build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
     "build:clean": "yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json",
@@ -54,7 +54,7 @@
     "e2e:build": "yarn build && yarn workspace graphiql build-bundles-min",
     "eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --max-warnings=0 --cache .",
     "format": "yarn eslint --fix && yarn pretty",
-    "jest": "jest",
+    "jest": "jest --testPathIgnorePatterns cm6-graphql",
     "license-check": "jsgl --local ./",
     "lint": "yarn eslint && yarn lint-check && yarn pretty-check && yarn lint-cspell",
     "lint-check": "eslint-config-prettier .eslintrc.js",
@@ -73,11 +73,11 @@
     "repo:resolve": "node scripts/set-resolution.js",
     "start-graphiql": "yarn workspace graphiql dev",
     "start-monaco": "yarn workspace example-monaco-graphql-webpack start",
-    "t": "yarn run testonly",
-    "test": "yarn jest --noStackTrace",
+    "t": "yarn run test",
+    "test": "yarn jest",
+    "test:ci": "yarn build:cm6-graphql && jest",
     "test:coverage": "yarn jest --coverage",
     "test:watch": "yarn jest --watch",
-    "testonly": "jest && yarn workspace codemirror-graphql run test",
     "tsc": "tsc --build"
   },
   "devDependencies": {
@@ -100,7 +100,7 @@
     "@types/codemirror": "^0.0.90",
     "@types/express": "^4.17.11",
     "@types/fetch-mock": "^7.3.2",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^29.5.2",
     "@types/node": "^16.18.4",
     "@types/prettier": "^2.7.0",
     "@types/ws": "^7.4.0",

packages/cm6-graphql/jest.config.js

@@ -1,5 +1,8 @@
 const base = require('../../jest.config.base')(__dirname);
 
+// remove the ignore line for cm6-graphql
+base.testPathIgnorePatterns.pop();
+
 module.exports = {
   ...base,
   transformIgnorePatterns: ['/node_modules/(?!@lezer)'],

packages/graphiql-react/mocks/svg.jsx → packages/graphiql-react/__mocks__/svg.jsx

@@ -1,7 +1,7 @@
-module.exports = function MockedIcon(props) {
+export default function MockedIcon(props) {
   return (
     <svg {...props}>
       <title>mocked icon</title>
     </svg>
   );
-};
+}

packages/graphiql-react/jest.config.js

@@ -3,7 +3,7 @@ const base = require('../../jest.config.base')(__dirname);
 module.exports = {
   ...base,
   moduleNameMapper: {
-    '\\.svg$': `${__dirname}/mocks/svg`,
+    '\\.svg$': `${__dirname}/__mocks__/svg`,
     ...base.moduleNameMapper,
   },
 };

packages/graphiql-react/package.json

@@ -65,7 +65,7 @@
   },
   "devDependencies": {
     "@babel/helper-string-parser": "^7.19.4",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
     "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^4.0.0",
     "graphql": "^16.4.0",

packages/graphiql-react/src/explorer/components/search.tsx

@@ -7,7 +7,14 @@ import {
   isInterfaceType,
   isObjectType,
 } from 'graphql';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FocusEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Combobox } from '@headlessui/react';
 import { MagnifyingGlassIcon } from '../../icons';
 import { useSchemaContext } from '../../schema';
@@ -63,7 +70,7 @@ export function Search() {
     [push],
   );
   const [isFocused, setIsFocused] = useState(false);
-  const handleFocus = useCallback(e => {
+  const handleFocus: FocusEventHandler = useCallback(e => {
     setIsFocused(e.type === 'focus');
   }, []);