test: fixed conflicts between wait-for-expect and jest timers

Author: logaretm

packages/batch/test/batch.spec.ts

@@ -6,9 +6,16 @@ import { useClient, useQuery } from '../../villus/src';
 import waitForExpect from 'wait-for-expect';
 import { PostQuery, PostsQuery, QueryErrorWith500, QueryWithNetworkError } from 'villus/test/mocks/queries';
 
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
 describe('batch plugin', () => {
   test('batches queries with batcher', async () => {
-    jest.useFakeTimers();
     mount({
       setup() {
         useClient({
@@ -32,16 +39,17 @@ describe('batch plugin', () => {
 
     jest.advanceTimersByTime(100);
     await flushPromises();
+
+    // wait-for-expect uses timers under the hood, so we need to reset here
+    jest.useRealTimers();
     await waitForExpect(() => {
       expect(fetch).toHaveBeenCalledTimes(1);
       expect(document.querySelector('#multi')?.children).toHaveLength(5);
       expect(document.querySelector('#single')?.textContent).toContain('Awesome');
     });
-    jest.useRealTimers();
   });
 
   test('results with non-200 code will be evaluated separately', async () => {
-    jest.useFakeTimers();
     mount({
       setup() {
         useClient({
@@ -65,16 +73,17 @@ describe('batch plugin', () => {
 
     jest.advanceTimersByTime(100);
     await flushPromises();
+
+    // wait-for-expect uses timers under the hood, so we need to reset here
+    jest.useRealTimers();
     await waitForExpect(() => {
       expect(fetch).toHaveBeenCalledTimes(1);
       expect(document.querySelector('#multi')?.children).toHaveLength(5);
       expect(document.querySelector('#error')?.textContent).toContain('Not authenticated');
     });
-    jest.useRealTimers();
   });
 
   test('handles network errors', async () => {
-    jest.useFakeTimers();
     mount({
       setup() {
         useClient({
@@ -94,9 +103,10 @@ describe('batch plugin', () => {
 
     jest.advanceTimersByTime(100);
     await flushPromises();
+    // wait-for-expect uses timers under the hood, so we need to reset here
+    jest.useRealTimers();
     await waitForExpect(() => {
       expect(document.querySelector('#error')?.textContent).toContain('Failed to connect');
     });
-    jest.useRealTimers();
   });
 });

packages/villus/test/helpers/observer.ts

@@ -1,5 +1,5 @@
+let interval: any;
 export function makeObservable(throws = false, simulateError = false) {
-  let interval: any;
   let counter = 0;
   const observable = {
     subscribe({ next, error }: { error: (err: Error) => any; next: (value: any) => any }) {
@@ -28,6 +28,10 @@ export function makeObservable(throws = false, simulateError = false) {
   return observable;
 }
 
+afterAll(() => {
+  clearTimeout(interval);
+});
+
 export function tick(ticks = 1) {
   jest.advanceTimersByTime(ticks * 100 + 1);
 }

packages/villus/test/mocks/handlers.ts

@@ -4,7 +4,7 @@ function makePost(id: number, title = 'Awesome Post') {
   return { id, title: `${id} ${title}` };
 }
 
-export const handlers = [
+export const handlers: any[] = [
   // Handles a "GetUserInfo" query
   graphql.query('Posts', (req, res, ctx) => {
     return res(
@@ -77,11 +77,11 @@ export const handlers = [
     return res.networkError('Failed to connect');
   }),
   // Handles Batched requests
-  rest.post('https://test.com/graphql', async (req, res) => {
+  rest.post('https://test.com/graphql', async (req, res, ctx) => {
     if (!Array.isArray(req.body)) {
       throw new Error('Unknown operation');
     }
-    const data = await Promise.all(
+    const responses = await Promise.all(
       req.body.map(async op => {
         const partReq = { ...req, body: op };
         const handler = handlers.find(h => h.test(partReq));
@@ -93,15 +93,10 @@ export const handlers = [
       })
     );
 
-    return res(res => {
-      res.headers.set('content-type', 'application/json');
-      res.body = JSON.stringify(
-        data.map(d => {
-          return JSON.parse(d?.response?.body) || {};
-        })
-      );
-
-      return res;
+    const batchedResponse = responses.map(d => {
+      return JSON.parse(d?.response?.body) || {};
     });
+
+    return res(ctx.json(batchedResponse));
   }),
 ];