test(workspace): Speed up slowest vitest tests (#3171)

exchanges/graphcache/src/offlineExchange.test.ts

@@ -6,7 +6,7 @@ import {
   OperationResult,
 } from '@urql/core';
 import { print } from 'graphql';
-import { vi, expect, it, describe } from 'vitest';
+import { vi, expect, it, describe, beforeAll } from 'vitest';
 
 import { pipe, share, map, makeSubject, tap, publish } from 'wonka';
 import { queryResponse } from '../../../packages/core/src/test-utils';
@@ -104,6 +104,10 @@ describe('storage', () => {
 });
 
 describe('offline', () => {
+  beforeAll(() => {
+    global.navigator = { onLine: true } as any;
+  });
+
   it('should intercept errored mutations', () => {
     const onlineSpy = vi.spyOn(navigator, 'onLine', 'get');
 

exchanges/refocus/src/refocusExchange.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { pipe, map, makeSubject, publish, tap } from 'wonka';
 import { vi, expect, it, beforeEach } from 'vitest';
 

package.json

@@ -106,7 +106,7 @@
     "typescript": "^4.9.5",
     "vite": "^3.2.4",
     "vite-tsconfig-paths": "^4.0.7",
-    "vitest": "^0.29.3"
+    "vitest": "^0.30.1"
   },
   "dependencies": {
     "@actions/github": "^5.1.1",

packages/core/src/internal/fetchOptions.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { expect, describe, it } from 'vitest';
 import { makeOperation } from '../utils/operation';
 import { queryOperation, mutationOperation } from '../test-utils';

packages/core/src/utils/variables.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { stringifyVariables, extractFiles } from './variables';
 import { describe, it, expect } from 'vitest';
 

packages/preact-urql/src/components/Mutation.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { h } from 'preact';
 import { act, cleanup, render } from '@testing-library/preact';
 import { pipe, fromValue, delay } from 'wonka';
@@ -16,6 +18,8 @@ const query = 'mutation Example { example }';
 
 describe('Mutation', () => {
   beforeEach(() => {
+    vi.useFakeTimers();
+
     vi.spyOn(global.console, 'error').mockImplementation(() => {
       // do nothing
     });
@@ -25,7 +29,7 @@ describe('Mutation', () => {
     cleanup();
   });
 
-  it('Should execute the mutation', async () => {
+  it('Should execute the mutation', () => {
     // eslint-disable-next-line
     let execute = () => {},
       props = {};
@@ -55,20 +59,21 @@ describe('Mutation', () => {
       fetching: false,
       error: undefined,
     });
+
     act(() => {
       execute();
     });
+
     expect(props).toStrictEqual({
       data: undefined,
       fetching: true,
       error: undefined,
     });
 
-    await new Promise(res => {
-      setTimeout(() => {
-        expect(props).toStrictEqual({ data: 1, fetching: false, error: 2 });
-        res(null);
-      }, 400);
+    act(() => {
+      vi.advanceTimersByTime(400);
     });
+
+    expect(props).toStrictEqual({ data: 1, fetching: false, error: 2 });
   });
 });

packages/preact-urql/src/components/Query.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { h } from 'preact';
 import { cleanup, render } from '@testing-library/preact';
 import { map, interval, pipe } from 'wonka';

packages/preact-urql/src/components/Subscription.test.tsx

@@ -1,5 +1,7 @@
+// @vitest-environment jsdom
+
 import { h } from 'preact';
-import { cleanup, render } from '@testing-library/preact';
+import { cleanup, render, act } from '@testing-library/preact';
 import { map, interval, pipe } from 'wonka';
 import { vi, expect, it, beforeEach, describe, afterEach } from 'vitest';
 
@@ -8,16 +10,17 @@ import { Subscription } from './Subscription';
 
 const query = 'subscription Example { example }';
 const client = {
-  executeSubscription: vi.fn(() =>
-    pipe(
+  executeSubscription: vi.fn(() => {
+    return pipe(
       interval(200),
       map((i: number) => ({ data: i, error: i + 1 }))
-    )
-  ),
+    );
+  }),
 };
 
 describe('Subscription', () => {
   beforeEach(() => {
+    vi.useFakeTimers();
     vi.spyOn(global.console, 'error').mockImplementation(() => {
       // do nothing
     });
@@ -27,7 +30,7 @@ describe('Subscription', () => {
     cleanup();
   });
 
-  it('Should execute the subscription', async () => {
+  it('Should execute the subscription', () => {
     let props = {};
     const Test = () => h('p', {}, 'hi');
     const App = () => {
@@ -44,18 +47,19 @@ describe('Subscription', () => {
         ],
       });
     };
+
     render(h(App, {}));
+
     expect(props).toStrictEqual({
       data: undefined,
       fetching: true,
       error: undefined,
     });
 
-    await new Promise(res => {
-      setTimeout(() => {
-        expect(props).toStrictEqual({ data: 0, fetching: true, error: 1 });
-        res(null);
-      }, 300);
+    act(() => {
+      vi.advanceTimersByTime(200);
     });
+
+    expect(props).toStrictEqual({ data: 0, fetching: true, error: 1 });
   });
 });

packages/preact-urql/src/hooks/useMutation.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { FunctionalComponent as FC, h } from 'preact';
 import { render, cleanup, act } from '@testing-library/preact';
 import { print } from 'graphql';

packages/preact-urql/src/hooks/useQuery.test.tsx

@@ -1,17 +1,11 @@
+// @vitest-environment jsdom
+
 import { FunctionalComponent as FC, h } from 'preact';
 import { render, cleanup, act } from '@testing-library/preact';
 import { OperationContext } from '@urql/core';
 import { map, interval, pipe, never, onStart, onEnd, empty } from 'wonka';
-import {
-  vi,
-  expect,
-  it,
-  beforeEach,
-  describe,
-  beforeAll,
-  Mock,
-  afterEach,
-} from 'vitest';
+
+import { vi, expect, it, beforeEach, describe, afterEach, Mock } from 'vitest';
 
 import { useQuery, UseQueryArgs, UseQueryState } from './useQuery';
 import { Provider } from '../context';
@@ -46,7 +40,8 @@ const QueryUser: FC<UseQueryArgs<{ myVar: number }>> = ({
   return h('p', {}, state.data);
 };
 
-beforeAll(() => {
+beforeEach(() => {
+  vi.useFakeTimers();
   vi.spyOn(global.console, 'error');
 });
 
@@ -106,7 +101,7 @@ describe('useQuery', () => {
     expect(state).toHaveProperty('fetching', true);
   });
 
-  it('forwards data response', async () => {
+  it('forwards data response', () => {
     const { rerender } = render(
       h(Provider, {
         value: client as any,
@@ -121,21 +116,20 @@ describe('useQuery', () => {
       })
     );
 
-    await new Promise(res => {
-      setTimeout(() => {
-        rerender(
-          h(Provider, {
-            value: client as any,
-            children: [h(QueryUser, { ...props })],
-          })
-        );
-        expect(state).toHaveProperty('data', 0);
-        res(null);
-      }, 400);
+    act(() => {
+      vi.advanceTimersByTime(400);
+      rerender(
+        h(Provider, {
+          value: client as any,
+          children: [h(QueryUser, { ...props })],
+        })
+      );
     });
+
+    expect(state).toHaveProperty('data', 0);
   });
 
-  it('forwards error response', async () => {
+  it('forwards error response', () => {
     const { rerender } = render(
       h(Provider, {
         value: client as any,
@@ -150,54 +144,48 @@ describe('useQuery', () => {
       })
     );
 
-    await new Promise(res => {
-      setTimeout(() => {
-        rerender(
-          h(Provider, {
-            value: client as any,
-            children: [h(QueryUser, { ...props })],
-          })
-        );
-        expect(state).toHaveProperty('error', 1);
-        res(null);
-      }, 400);
+    act(() => {
+      vi.advanceTimersByTime(400);
+      rerender(
+        h(Provider, {
+          value: client as any,
+          children: [h(QueryUser, { ...props })],
+        })
+      );
     });
+
+    expect(state).toHaveProperty('error', 1);
   });
 
-  it('forwards extensions response', async () => {
+  it('forwards extensions response', () => {
     const { rerender } = render(
       h(Provider, {
         value: client as any,
         children: [h(QueryUser, { ...props })],
       })
     );
-    /**
-     * Have to call update (without changes) in order to see the
-     * result of the state change.
-     */
+
     rerender(
       h(Provider, {
         value: client as any,
         children: [h(QueryUser, { ...props })],
       })
     );
 
-    await new Promise(res => {
-      setTimeout(() => {
-        rerender(
-          h(Provider, {
-            value: client as any,
-            children: [h(QueryUser, { ...props })],
-          })
-        );
-
-        expect(state).toHaveProperty('extensions', { i: 1 });
-        res(null);
-      }, 400);
+    act(() => {
+      vi.advanceTimersByTime(400);
+      rerender(
+        h(Provider, {
+          value: client as any,
+          children: [h(QueryUser, { ...props })],
+        })
+      );
     });
+
+    expect(state).toHaveProperty('extensions', { i: 1 });
   });
 
-  it('sets fetching to false', async () => {
+  it('sets fetching to false', () => {
     const { rerender } = render(
       h(Provider, {
         value: client as any,
@@ -212,18 +200,17 @@ describe('useQuery', () => {
       })
     );
 
-    await new Promise(res => {
-      setTimeout(() => {
-        rerender(
-          h(Provider, {
-            value: client as any,
-            children: [h(QueryUser, { ...props })],
-          })
-        );
-        expect(state).toHaveProperty('fetching', false);
-        res(null);
-      }, 400);
+    act(() => {
+      vi.advanceTimersByTime(400);
+      rerender(
+        h(Provider, {
+          value: client as any,
+          children: [h(QueryUser, { ...props })],
+        })
+      );
     });
+
+    expect(state).toHaveProperty('fetching', false);
   });
 
   describe('on change', () => {
@@ -237,24 +224,22 @@ describe('useQuery', () => {
         })
       );
 
-      /**
-       * Have to call update twice for the change to be detected.
-       * Only a single change is detected (updating 5 times still only calls
-       * execute subscription twice).
-       */
-      rerender(
-        h(Provider, {
-          value: client as any,
-          children: [h(QueryUser, { ...props, query: q })],
-        })
-      );
       rerender(
         h(Provider, {
           value: client as any,
           children: [h(QueryUser, { ...props, query: q })],
         })
       );
 
+      act(() => {
+        rerender(
+          h(Provider, {
+            value: client as any,
+            children: [h(QueryUser, { ...props, query: q })],
+          })
+        );
+      });
+
       expect(client.executeQuery).toBeCalledTimes(2);
     });
   });

packages/preact-urql/src/hooks/useSubscription.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 import { FunctionalComponent as FC, h } from 'preact';
 import { render, cleanup, act } from '@testing-library/preact';
 import { OperationContext } from '@urql/core';