Post

Unit Test: fix `import` a file after the Jest environment has been torn down

Posted
By paolochang 2 min read

Component 내 사용하는 module의 loading 시간이 초과되었을때 나타나는 오류로 보인다. Component 테스트에 앞서 async/await 처리를 해주거나 timer configuration setting으로 문제를 해결 할 수 있다.

Error Message

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

     at Object.get BackHandler [as BackHandler] (node_modules/react-native/index.js:129:12)
     at node_modules/@react-navigation/native/lib/commonjs/useBackButton.js:50:37
     at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12932:26)
     at commitPassiveMountOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14346:11)
     at commitPassiveMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14306:9)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

     11 | const AppNav = () => {
     12 |   const scheme = useColorScheme();
   > 13 |
        | ^
     14 |   let user = null;
     15 |
     16 |   return (

     at Object.get useColorScheme [as useColorScheme] (node_modules/react-native/index.js:219:12)
     at AppNav (src/navigation/AppNav.js:13:33)
     at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2028:7)
     at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2123:12)
     at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2686:14)

 ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
   Attempted to log "The above error occurred in the <ForwardRef(NavigationContainerInner)> component:

       at NavigationContainerInner (/Users/username/Documents/workspace/MyApp/node_modules/@react-navigation/native/src/NavigationContainer.tsx:107:23)
       at AppNav (/Users/username/Documents/workspace/MyApp/src/navigation/AppNav.js:13:48)
       at App

   Consider adding an error boundary to your tree to customize error handling behavior.
   Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.".

Node.js v18.8.0
 FAIL  src/__tests__/App-test.js
  ● Test suite failed to run

    Call retries were exceeded

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)

Solution

  • Test a async component

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    import "react-native";
import React from "react";
import App from "../../App";

// Note: test renderer must be required after react-native.
import renderer, { act } from "react-test-renderer";

describe("App", () => {
  it("compares snapshot", async () => {
    let wrapper;
    await act(async () => {
      wrapper = renderer.create(<App />);
    });
    await expect(wrapper.toJSON()).toMatchSnapshot();
  });
});

OR

  • Add timers: 'fake' to jest.config.js

    1
2
3

    module.exports = {
  timers: "fake",
};

    timers [string] Default: real

    Setting this value to fake allows the use of fake timers for functions such as setTimeout. Fake timers are useful when a piece of code sets a long timeout that we don’t want to wait for in a test.

OR

  • Add jest.useFakeTimers(); to setupTests.js

    1

    jest.useFakeTimers();

Reference

Unit Test, Jest
React Native Bugfix Unit Test Jest
This post is licensed under CC BY 4.0 by the author.