Merge pull request #2460 from reduxjs/bugfix/broken-tests

Author: markerikson

.github/workflows/test-codegen.yml

@@ -31,7 +31,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['16.x']
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/tests.yml

@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['14.x']
+        node: ['16.x']
 
     steps:
       - name: Checkout repo
@@ -58,7 +58,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['14.x']
+        node: ['16.x']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -95,7 +95,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['14.x']
+        node: ['16.x']
         ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7']
     steps:
       - name: Checkout repo

packages/rtk-query-codegen-openapi/package.json

@@ -35,7 +35,7 @@
     "@reduxjs/toolkit": "^1.6.0",
     "@types/commander": "^2.12.2",
     "@types/glob-to-regexp": "^0.4.0",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.12",
     "@types/prettier": "^2.1.6",
@@ -46,11 +46,11 @@
     "esbuild": "^0.13.10",
     "esbuild-runner": "^2.2.1",
     "husky": "^4.3.6",
-    "jest": "^26.6.3",
+    "jest": "^27",
     "msw": "^0.41.1",
     "openapi-types": "^9.1.0",
     "pretty-quick": "^3.1.0",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^27",
     "ts-node": "^10.4.0",
     "yalc": "^1.0.0-pre.47"
   },

packages/rtk-query-codegen-openapi/test/cli.test.ts

@@ -33,8 +33,6 @@ afterEach(() => {
 
 describe('CLI options testing', () => {
   test('generation with `config.example.js`', async () => {
-    jest.setTimeout(10000);
-
     const out = await cli([`./config.example.js`], __dirname);
 
     expect(out).toEqual({
@@ -46,11 +44,9 @@ Done
     });
 
     expect(fs.readFileSync(path.resolve(tmpDir, 'example.ts'), 'utf-8')).toMatchSnapshot();
-  });
+  }, 25000);
 
   test('paths are relative to configfile, not to cwd', async () => {
-    jest.setTimeout(10000);
-
     const out = await cli([`../test/config.example.js`], path.resolve(__dirname, '../src'));
 
     expect(out).toEqual({
@@ -62,11 +58,9 @@ Done
     });
 
     expect(fs.readFileSync(path.resolve(tmpDir, 'example.ts'), 'utf-8')).toMatchSnapshot();
-  });
+  }, 25000);
 
   test('ts, js and json all work the same', async () => {
-    jest.setTimeout(25000);
-
     await cli([`./config.example.js`], __dirname);
     const fromJs = fs.readFileSync(path.resolve(tmpDir, 'example.ts'), 'utf-8');
     await cli([`./config.example.ts`], __dirname);
@@ -76,12 +70,10 @@ Done
 
     expect(fromTs).toEqual(fromJs);
     expect(fromJson).toEqual(fromJs);
-  });
+  }, 25000);
 
   test('missing parameters doesnt fail', async () => {
-    jest.setTimeout(25000);
-
     const out = await cli([`./config.invalid-example.json`], __dirname);
-    expect(out.stderr).toContain("Error: path parameter petId does not seem to be defined in '/pet/{petId}'!")
-  });
+    expect(out.stderr).toContain("Error: path parameter petId does not seem to be defined in '/pet/{petId}'!");
+  }, 25000);
 });

packages/toolkit/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: 'jest-environment-jsdom',
   setupFilesAfterEnv: ['./jest.setup.js'],
   testMatch: ['<rootDir>/src/**/*.(spec|test).[jt]s?(x)'],
   moduleNameMapper: {

packages/toolkit/package.json

@@ -32,7 +32,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/convert-source-map": "^1.5.1",
-    "@types/jest": "^24.0.11",
+    "@types/jest": "^27",
     "@types/json-stringify-safe": "^5.0.0",
     "@types/nanoid": "^2.1.0",
     "@types/node": "^10.14.4",
@@ -57,7 +57,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
-    "jest": "^26.6.3",
+    "jest": "^27",
     "json-stringify-safe": "^5.0.1",
     "magic-string": "^0.25.7",
     "merge-source-map": "^1.1.0",
@@ -71,7 +71,7 @@
     "size-limit": "^4.11.0",
     "source-map": "^0.7.3",
     "terser": "^5.6.1",
-    "ts-jest": "^26.5.5",
+    "ts-jest": "^27",
     "tslib": "^1.10.0",
     "typescript": "~4.2.4",
     "yargs": "^15.3.1"

packages/toolkit/src/entities/tests/utils.spec.ts

@@ -1,4 +1,3 @@
-import { selectIdValue } from '../utils'
 import { AClockworkOrange } from './fixtures/book'
 
 describe('Entity utils', () => {
@@ -12,26 +11,29 @@ describe('Entity utils', () => {
 
     afterEach(() => {
       process.env = OLD_ENV
+      jest.resetAllMocks()
     })
 
     it('should not warn when key does exist', () => {
-      const spy = spyOn(console, 'warn')
-
-      selectIdValue(AClockworkOrange, (book) => book.id)
+      const { selectIdValue } = require('../utils')
+      const spy = jest.spyOn(console, 'warn')
 
+      selectIdValue(AClockworkOrange, (book: any) => book.id)
       expect(spy).not.toHaveBeenCalled()
     })
 
     it('should warn when key does not exist in dev mode', () => {
-      const spy = spyOn(console, 'warn')
+      const { selectIdValue } = require('../utils')
+      const spy = jest.spyOn(console, 'warn')
 
       selectIdValue(AClockworkOrange, (book: any) => book.foo)
 
       expect(spy).toHaveBeenCalled()
     })
 
     it('should warn when key is undefined in dev mode', () => {
-      const spy = spyOn(console, 'warn')
+      const { selectIdValue } = require('../utils')
+      const spy = jest.spyOn(console, 'warn')
 
       const undefinedAClockworkOrange = { ...AClockworkOrange, id: undefined }
       selectIdValue(undefinedAClockworkOrange, (book: any) => book.id)
@@ -41,7 +43,8 @@ describe('Entity utils', () => {
 
     it('should not warn when key does not exist in prod mode', () => {
       process.env.NODE_ENV = 'production'
-      const spy = spyOn(console, 'warn')
+      const { selectIdValue } = require('../utils')
+      const spy = jest.spyOn(console, 'warn')
 
       selectIdValue(AClockworkOrange, (book: any) => book.foo)
 
@@ -50,7 +53,8 @@ describe('Entity utils', () => {
 
     it('should not warn when key is undefined in prod mode', () => {
       process.env.NODE_ENV = 'production'
-      const spy = spyOn(console, 'warn')
+      const { selectIdValue } = require('../utils')
+      const spy = jest.spyOn(console, 'warn')
 
       const undefinedAClockworkOrange = { ...AClockworkOrange, id: undefined }
       selectIdValue(undefinedAClockworkOrange, (book: any) => book.id)

packages/toolkit/src/query/tests/cacheCollection.test.ts

@@ -4,7 +4,7 @@ import { waitMs } from './helpers'
 import type { Middleware, Reducer } from 'redux'
 
 beforeAll(() => {
-  jest.useFakeTimers()
+  jest.useFakeTimers('legacy')
 })
 
 const onCleanup = jest.fn()

packages/toolkit/src/query/tests/cacheLifecycle.test.ts

@@ -4,7 +4,7 @@ import { fetchBaseQuery } from '@reduxjs/toolkit/query'
 import { expectType, fakeTimerWaitFor, setupApiStore, waitMs } from './helpers'
 
 beforeAll(() => {
-  jest.useFakeTimers()
+  jest.useFakeTimers('legacy')
 })
 
 const api = createApi({

packages/toolkit/src/query/tests/cleanup.test.tsx

@@ -35,7 +35,7 @@ function UsingAB() {
 }
 
 beforeAll(() => {
-  jest.useFakeTimers()
+  jest.useFakeTimers('legacy')
 })
 
 test('data stays in store when component stays rendered', async () => {

packages/toolkit/src/query/tests/createApi.test.ts

@@ -332,13 +332,14 @@ describe('endpoint definition typings', () => {
       })
     }
     let api = getNewApi()
-    let storeRef = setupApiStore(api)
     beforeEach(() => {
       api = getNewApi()
-      storeRef = setupApiStore(api)
     })
 
     test('pre-modification behaviour', async () => {
+      const storeRef = setupApiStore(api, undefined, {
+        withoutTestLifecycles: true,
+      })
       storeRef.store.dispatch(api.endpoints.query1.initiate('in1'))
       storeRef.store.dispatch(api.endpoints.query2.initiate('in2'))
       storeRef.store.dispatch(api.endpoints.mutation1.initiate('in1'))
@@ -397,6 +398,9 @@ describe('endpoint definition typings', () => {
     })
 
     test('warn on wrong tagType', async () => {
+      const storeRef = setupApiStore(api, undefined, {
+        withoutTestLifecycles: true,
+      })
       // only type-test this part
       if (2 > 1) {
         api.enhanceEndpoints({
@@ -455,6 +459,9 @@ describe('endpoint definition typings', () => {
     })
 
     test('modify', () => {
+      const storeRef = setupApiStore(api, undefined, {
+        withoutTestLifecycles: true,
+      })
       api.enhanceEndpoints({
         endpoints: {
           query1: {
@@ -751,7 +758,9 @@ test('providesTags and invalidatesTags can use baseQueryMeta', async () => {
     }),
   })
 
-  const storeRef = setupApiStore(api)
+  const storeRef = setupApiStore(api, undefined, {
+    withoutTestLifecycles: true,
+  })
 
   await storeRef.store.dispatch(api.endpoints.query.initiate())
   expect('request' in _meta! && 'response' in _meta!).toBe(true)

packages/toolkit/src/query/tests/helpers.tsx

@@ -173,7 +173,11 @@ export function setupApiStore<
     util: { resetApiState(): any }
   },
   R extends Record<string, Reducer<any, any>> = Record<never, never>
->(api: A, extraReducers?: R, withoutListeners?: boolean) {
+>(
+  api: A,
+  extraReducers?: R,
+  options: { withoutListeners?: boolean; withoutTestLifecycles?: boolean } = {}
+) {
   const getStore = () =>
     configureStore({
       reducer: { api: api.reducer, ...extraReducers },
@@ -203,21 +207,23 @@ export function setupApiStore<
   }
   let cleanupListeners: () => void
 
-  beforeEach(() => {
-    const store = getStore() as StoreType
-    refObj.store = store
-    refObj.wrapper = withProvider(store)
-    if (!withoutListeners) {
-      cleanupListeners = setupListeners(store.dispatch)
-    }
-  })
-  afterEach(() => {
-    cleanup()
-    if (!withoutListeners) {
-      cleanupListeners()
-    }
-    refObj.store.dispatch(api.util.resetApiState())
-  })
+  if (!options.withoutTestLifecycles) {
+    beforeEach(() => {
+      const store = getStore() as StoreType
+      refObj.store = store
+      refObj.wrapper = withProvider(store)
+      if (!options.withoutListeners) {
+        cleanupListeners = setupListeners(store.dispatch)
+      }
+    })
+    afterEach(() => {
+      cleanup()
+      if (!options.withoutListeners) {
+        cleanupListeners()
+      }
+      refObj.store.dispatch(api.util.resetApiState())
+    })
+  }
 
   return refObj
 }

packages/toolkit/src/query/tests/invalidation.test.tsx

@@ -100,7 +100,9 @@ test.each(caseMatrix)(
             invalidatesTags,
           }),
         }),
-      })
+      }),
+      undefined,
+      { withoutTestLifecycles: true }
     )
 
     store.dispatch(providing.initiate())

packages/toolkit/src/query/tests/refetchingBehaviors.test.tsx

@@ -72,7 +72,7 @@ describe('refetchOnFocus tests', () => {
       expect(screen.getByTestId('amount').textContent).toBe('1')
     )
 
-    act(() => {
+    await act(async () => {
       fireEvent.focus(window)
     })
 
@@ -366,7 +366,9 @@ describe('refetchOnReconnect tests', () => {
 })
 
 describe('customListenersHandler', () => {
-  const storeRef = setupApiStore(defaultApi, undefined, true)
+  const storeRef = setupApiStore(defaultApi, undefined, {
+    withoutListeners: true,
+  })
 
   test('setupListeners accepts a custom callback and executes it', async () => {
     const consoleSpy = jest.spyOn(console, 'log')