Stack Navigator：ReferenceError：您正在尝试在 Jest 环境被拆除后“导入”文件

Question

我的代码非常简单。只需确保我的开发设置正确即可。

App.js

export default function App() {
  return (
    <NavigationContainer>
      {/* <View style={styles.container}>
        <Text>Hello Modules!</Text>
        <StatusBar style="auto" />
      </View> */}
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{title: 'Welcome'}} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{title: 'Details'}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

App.test

import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';


describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
  });
  it('renders correctly', async () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });
  it('renders correctly', async () => {
    renderer.create(<App />);
  });
});

测试通过。但我仍然得到：

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ has 1 child (46 ms)
    ✓ renders correctly (9 ms)
    ✓ renders correctly (4 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   1 written, 1 total
Time:        1.033 s, estimated 2 s
Ran all test suites.

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

没有需要等待的异步代码。 有关了解此错误的原因以及如何解决它的任何提示？ 在我看到的一些答案中，我认为不需要模拟或其他任何东西。 问题似乎是 Stack Navigator。

更新 1

简化为最少的测试和组件设置。 一旦我创建了<NavigationContainer> 对象，就会出现错误：

$ npm test

> @ test /project
> jest

 PASS  __tests__/App.test.js
  <App /> Basics
    ✓ renders App (30 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.167 s, estimated 2 s
Ran all test suites.

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:191:12)
      at node_modules/@react-navigation/native/lib/commonjs/useBackButton.js:64:37
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)

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

      23 |   );
      24 | }
    > 25 | 
         | ^
      26 | const styles = StyleSheet.create({
      27 |   container: {
      28 |     flex: 1,

      at Object.get View [as View] (node_modules/react-native/index.js:150:12)
      at App (App.js:25:116)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

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

      25 | 
      26 | const styles = StyleSheet.create({
    > 27 |   container: {
         |                         ^
      28 |     flex: 1,
      29 |     backgroundColor: '#fff',
      30 |     alignItems: 'center',

      at Object.get Text [as Text] (node_modules/react-native/index.js:122:12)
      at App (App.js:27:48)
      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)
      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)
      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)

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

      at Object.useCallback [as Linking] (node_modules/react-native/index.js:246:12)
      at subscribe (node_modules/@react-navigation/native/lib/commonjs/useLinking.native.tsx:121:33)
      at node_modules/@react-navigation/native/lib/commonjs/useLinking.native.js:206:12
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
  console.error
    The above error occurred in the <ForwardRef(NavigationContainerInner)> component:
    
        at NavigationContainerInner (/project/node_modules/@react-navigation/native/lib/commonjs/NavigationContainer.tsx:127:4)
        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.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)

Answer 1

我认为NavigationContainer 或其子项中的某些动画需要在您退出测试之前进行await-ed。

当您使用react-test-renderer 时，您可以使用act 来渲染和更新您的组件。这样的事情应该可以工作：

import {create, act} from 'react-test-renderer';

describe('<App /> Basics', () => {
  it('has 1 child', async () => {
    let tree
    act(()=>{
       tree = create(<App />)
    })
    expect(tree.toJSON().children.length).toBe(1);
  });
})