migrate graphiql-toolkit to vitest (#3748)

Author: dimaMachina

.eslintrc.js

@@ -333,7 +333,7 @@ module.exports = {
         'unicorn/prefer-node-protocol': 'error',
         'import-x/no-unresolved': [
           'error',
-          { ignore: ['^node:', '\\.svg\\?react$'] },
+          { ignore: ['^node:', '\\.svg\\?react$', 'vitest/config'] },
         ],
         'no-extra-boolean-cast': [
           'error',

package.json

@@ -137,7 +137,7 @@
     "ts-jest": "^27.1.5",
     "typedoc": "^0.19.2",
     "typescript": "^4.6.3",
-    "vitest": "^2.0.4",
+    "vitest": "^2.0.5",
     "wgutils": "^0.1.7",
     "wsrun": "^5.2.4"
   },

packages/graphiql-toolkit/jest.config.js

@@ -22,7 +22,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "prebuild": "yarn types:check",
-    "types:check": "tsc --noEmit"
+    "types:check": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",

packages/graphiql-toolkit/package.json

@@ -1,13 +1,14 @@
+import { vi } from 'vitest';
 import { parse, getIntrospectionQuery } from 'graphql';
 import { createGraphiQLFetcher } from '../createFetcher';
 
 import 'isomorphic-fetch';
 
-jest.mock('../lib');
+vi.mock('../lib');
 
-jest.mock('graphql-ws');
+vi.mock('graphql-ws');
 
-jest.mock('subscriptions-transport-ws');
+vi.mock('subscriptions-transport-ws');
 
 import {
   createWebsocketsFetcherFromUrl,
@@ -26,7 +27,7 @@ const exampleIntrospectionDocument = parse(getIntrospectionQuery());
 
 describe('createGraphiQLFetcher', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
   it('returns fetcher without websocket client by default', () => {
     createWebsocketsFetcherFromUrl.mockReturnValue(true);

packages/graphiql-toolkit/src/create-fetcher/__tests__/buildFetcher.spec.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest';
 import { parse } from 'graphql';
 import {
   isSubscriptionWithName,
@@ -7,9 +8,9 @@ import {
 
 import 'isomorphic-fetch';
 
-jest.mock('graphql-ws');
+vi.mock('graphql-ws');
 
-jest.mock('subscriptions-transport-ws');
+vi.mock('subscriptions-transport-ws');
 
 import { createClient } from 'graphql-ws';
 
@@ -44,7 +45,7 @@ describe('isSubscriptionWithName', () => {
 
 describe('createWebsocketsFetcherFromUrl', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it('creates a websockets client using provided url', async () => {
@@ -64,7 +65,7 @@ describe('createWebsocketsFetcherFromUrl', () => {
 
 describe('getWsFetcher', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
   it('provides an observable wsClient when custom wsClient option is provided', async () => {
     createClient.mockReturnValue(true);
@@ -92,10 +93,17 @@ describe('getWsFetcher', () => {
 
 describe('missing `graphql-ws` dependency', () => {
   it('should throw a nice error', async () => {
-    jest.resetModules();
-    jest.doMock('graphql-ws', () => {
-      // eslint-disable-next-line no-throw-literal
-      throw { code: 'MODULE_NOT_FOUND' };
+    vi.resetModules();
+    vi.doMock('graphql-ws', () => {
+      // While throwing an error directly inside this callback `code` is attached in `cause`
+      // property e.g. `Error.cause.code`, so I throw an error on calling `createClient` instead
+
+      return {
+        createClient: vi.fn().mockImplementation(() => {
+          // eslint-disable-next-line no-throw-literal
+          throw { code: 'MODULE_NOT_FOUND' };
+        }),
+      };
     });
 
     await expect(

packages/graphiql-toolkit/src/create-fetcher/__tests__/lib.spec.ts

@@ -79,7 +79,7 @@ describe('StorageAPI', () => {
     });
     const result = throwingStorage.set('key', 'value');
 
-    expect(result.error.message).toEqual('Terrible Error');
+    expect(result.error!.message).toEqual('Error: Terrible Error');
     expect(result.isQuotaError).toBe(false);
   });
 
@@ -93,7 +93,7 @@ describe('StorageAPI', () => {
     });
     const result = throwingStorage.set('key', 'value');
 
-    expect(result.error.message).toEqual('Terrible Error');
+    expect(result.error!.message).toEqual('QuotaExceededError: Terrible Error');
     expect(result.isQuotaError).toBe(true);
   });
 });

packages/graphiql-toolkit/src/storage/__tests__/base.spec.ts

@@ -9,7 +9,8 @@
     "skipLibCheck": true,
     "allowJs": true,
     "lib": ["es2022", "dom"],
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "types": ["vitest/globals"]
   },
   "include": ["src", "tsup.config.ts"],
   "exclude": ["**/*.spec.ts"]

packages/graphiql-toolkit/tsconfig.json

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+});

packages/graphiql-toolkit/vitest.config.mts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import-x/no-unresolved -- todo: try to fix better rather ignoring here?
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({