chore: update Jest to 28 (#1008)

* chore: update jest

* refactor: pass useFakeTimer config in tests

* refactor: remove unused code

* fix jest config unable to discover babel due to rootDir change

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

Author: mdjastrzebski

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          node: '10',
+          node: '14',
         },
         bugfixes: true,
       },

package.json

@@ -29,27 +29,27 @@
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-transform-flow-strip-types": "^7.16.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.18.0",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.16.0",
     "@callstack/eslint-config": "^11.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/jest-native": "~4.0.2",
-    "@types/jest": "^27.0.0",
+    "@types/jest": "^28.0.0",
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.66.6",
     "@types/react-test-renderer": "^17.0.0",
-    "babel-jest": "^27.0.0",
+    "babel-jest": "^28.0.0",
     "conventional-changelog-cli": "^2.0.11",
     "cp-cli": "^2.0.0",
     "dedent": "^0.7.0",
     "del-cli": "^3.0.1",
     "eslint": "^7.32.0",
     "flow-bin": "~0.170.0",
     "flow-copy-source": "^2.0.9",
-    "jest": "^27.0.0",
+    "jest": "^28.0.0",
     "react": "^18.0.0",
     "react-native": "~0.69.1",
     "react-test-renderer": "^18.0.0",
@@ -82,10 +82,10 @@
     "prepare": "yarn build"
   },
   "jest": {
-    "preset": "../jest-preset",
-    "rootDir": "./src",
+    "preset": "./jest-preset",
     "testPathIgnorePatterns": [
-      "timerUtils"
+      "timerUtils",
+      "examples/"
     ],
     "testTimeout": 60000,
     "transformIgnorePatterns": [

src/__tests__/auto-cleanup.test.tsx

@@ -38,13 +38,13 @@ test('component is automatically umounted after first test ends', () => {
 });
 
 test('does not time out with legacy fake timers', () => {
-  jest.useFakeTimers('legacy');
+  jest.useFakeTimers({ legacyFakeTimers: true });
   render(<Test />);
   expect(isMounted).toEqual(true);
 });
 
 test('does not time out with fake timers', () => {
-  jest.useFakeTimers('modern');
+  jest.useFakeTimers();
   render(<Test />);
   expect(isMounted).toEqual(true);
 });

src/__tests__/timerUtils.ts

@@ -1,12 +1,7 @@
 import { setTimeout } from '../helpers/timers';
 
-const TimerMode = {
-  Legacy: 'legacy',
-  Modern: 'modern', // broken for now
-} as const;
-
 async function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export { TimerMode, sleep };
+export { sleep };

src/__tests__/timers.test.ts

@@ -1,11 +1,10 @@
 import waitFor from '../waitFor';
-import { TimerMode } from './timerUtils';
 
-describe.each([TimerMode.Legacy, TimerMode.Modern])(
-  '%s fake timers tests',
-  (fakeTimerType) => {
+describe.each([false, true])(
+  'fake timers tests (legacyFakeTimers = %s)',
+  (legacyFakeTimers) => {
     beforeEach(() => {
-      jest.useFakeTimers(fakeTimerType);
+      jest.useFakeTimers({ legacyFakeTimers });
     });
 
     test('it successfully runs tests', () => {

src/__tests__/waitFor.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import { fireEvent, render, waitFor } from '..';
-import { TimerMode } from './timerUtils';
 
 class Banana extends React.Component<any> {
   changeFresh = () => {
@@ -79,36 +78,26 @@ test('waits for element with custom interval', async () => {
   expect(mockFn).toHaveBeenCalledTimes(2);
 });
 
-test('waits for element until it stops throwing using modern fake timers', async () => {
-  jest.useFakeTimers('modern');
-  const { getByText, queryByText } = render(<BananaContainer />);
-
-  fireEvent.press(getByText('Change freshness!'));
-  expect(queryByText('Fresh')).toBeNull();
-
-  jest.advanceTimersByTime(300);
-  const freshBananaText = await waitFor(() => getByText('Fresh'));
-
-  expect(freshBananaText.props.children).toBe('Fresh');
-});
+test.each([false, true])(
+  'waits for element until it stops throwing using fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+    const { getByText, queryByText } = render(<BananaContainer />);
 
-test('waits for element until it stops throwing using legacy fake timers', async () => {
-  jest.useFakeTimers('legacy');
-  const { getByText, queryByText } = render(<BananaContainer />);
+    fireEvent.press(getByText('Change freshness!'));
+    expect(queryByText('Fresh')).toBeNull();
 
-  fireEvent.press(getByText('Change freshness!'));
-  expect(queryByText('Fresh')).toBeNull();
-
-  jest.advanceTimersByTime(300);
-  const freshBananaText = await waitFor(() => getByText('Fresh'));
+    jest.advanceTimersByTime(300);
+    const freshBananaText = await waitFor(() => getByText('Fresh'));
 
-  expect(freshBananaText.props.children).toBe('Fresh');
-});
+    expect(freshBananaText.props.children).toBe('Fresh');
+  }
+);
 
-test.each([TimerMode.Legacy, TimerMode.Modern])(
-  'waits for assertion until timeout is met with %s fake timers',
-  async (fakeTimerType) => {
-    jest.useFakeTimers(fakeTimerType);
+test.each([false, true])(
+  'waits for assertion until timeout is met with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
 
     const mockFn = jest.fn(() => {
       throw Error('test');
@@ -124,10 +113,10 @@ test.each([TimerMode.Legacy, TimerMode.Modern])(
   }
 );
 
-test.each([TimerMode.Legacy, TimerMode.Modern])(
-  'waits for assertion until timeout is met with %s fake timers',
-  async (fakeTimerType) => {
-    jest.useFakeTimers(fakeTimerType);
+test.each([false, true])(
+  'waits for assertion until timeout is met with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
 
     const mockErrorFn = jest.fn(() => {
       throw Error('test');
@@ -150,10 +139,10 @@ test.each([TimerMode.Legacy, TimerMode.Modern])(
   }
 );
 
-test.each([TimerMode.Legacy, TimerMode.Legacy])(
-  'awaiting something that succeeds before timeout works with %s fake timers',
-  async (fakeTimerType) => {
-    jest.useFakeTimers(fakeTimerType);
+test.each([false, true])(
+  'awaiting something that succeeds before timeout works with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
 
     let calls = 0;
     const mockFn = jest.fn(() => {

src/__tests__/waitForElementToBeRemoved.test.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { render, fireEvent, waitForElementToBeRemoved } from '..';
-import { TimerMode } from './timerUtils';
 
 const TestSetup = ({ shouldUseDelay = true }) => {
   const [isAdded, setIsAdded] = useState(true);
@@ -130,10 +129,10 @@ test('waits with custom interval', async () => {
   expect(mockFn).toHaveBeenCalledTimes(4);
 });
 
-test.each([TimerMode.Legacy, TimerMode.Modern])(
-  'works with %s fake timers',
-  async (fakeTimerType) => {
-    jest.useFakeTimers(fakeTimerType);
+test.each([false, true])(
+  'works with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
 
     const mockFn = jest.fn(() => <View />);
 

src/helpers/timers.ts

@@ -2,6 +2,8 @@
 /* globals jest */
 const globalObj = typeof window === 'undefined' ? global : window;
 
+type FakeTimersTypes = 'modern' | 'legacy';
+
 // Currently this fn only supports jest timers, but it could support other test runners in the future.
 function runWithRealTimers<T>(callback: () => T): T {
   const fakeTimersType = getJestFakeTimersType();
@@ -12,13 +14,14 @@ function runWithRealTimers<T>(callback: () => T): T {
   const callbackReturnValue = callback();
 
   if (fakeTimersType) {
-    jest.useFakeTimers(fakeTimersType);
+    const fakeTimersConfig = getFakeTimersConfigFromType(fakeTimersType);
+    jest.useFakeTimers(fakeTimersConfig);
   }
 
   return callbackReturnValue;
 }
 
-function getJestFakeTimersType() {
+function getJestFakeTimersType(): FakeTimersTypes | null {
   // istanbul ignore if
   if (
     typeof jest === 'undefined' ||
@@ -49,9 +52,16 @@ function getJestFakeTimersType() {
       // not using Jest's modern fake timers
     }
   }
+
   return null;
 }
 
+function getFakeTimersConfigFromType(type: FakeTimersTypes) {
+  return type === 'legacy'
+    ? { legacyFakeTimers: true }
+    : { legacyFakeTimers: false };
+}
+
 const jestFakeTimersAreEnabled = (): boolean =>
   Boolean(getJestFakeTimersType());