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

Question

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

\n

应用程序.js

\n

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

\n

应用程序测试

\n

import React from 'react';\nimport App from '../App';\nimport renderer from 'react-test-renderer';\n\n\ndescribe('<App /> Basics', () => {\n  it('has 1 child', async () => {\n    const tree = renderer.create(<App />).toJSON();\n    expect(tree.children.length).toBe(1);\n  });\n  it('renders correctly', async () => {\n    const tree = renderer.create(<App />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n  it('renders correctly', async () => {\n    renderer.create(<App />);\n  });\n});\n

\n

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

\n

 PASS  __tests__/App.test.js\n  <App /> Basics\n    \xe2\x9c\x93 has 1 child (46 ms)\n    \xe2\x9c\x93 renders correctly (9 ms)\n    \xe2\x9c\x93 renders correctly (4 ms)\n\n \xe2\x80\xba 1 snapshot written.\nSnapshot Summary\n \xe2\x80\xba 1 snapshot written from 1 test suite.\n\nTest Suites: 1 passed, 1 total\nTests:       3 passed, 3 total\nSnapshots:   1 written, 1 total\nTime:        1.033 s, estimated 2 s\nRan all test suites.\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n

\n

没有需要等待的异步代码。\n有什么关于理解此错误的原因以及如何解决它的提示吗？\n在我看到的一些答案中，我没有看到需要模拟或其他任何内容。\n问题似乎是堆栈导航器。

\n

更新1

\n

简化到最少的测试和组件设置。\n只要我创建一个<NavigationContainer>对象，就会出现错误：

\n

$ npm test\n\n> @ test /project\n> jest\n\n PASS  __tests__/App.test.js\n  <App /> Basics\n    \xe2\x9c\x93 renders App (30 ms)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        1.167 s, estimated 2 s\nRan all test suites.\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n      at Object.get BackHandler [as BackHandler] (node_modules/react-native/index.js:191:12)\n      at node_modules/@react-navigation/native/lib/commonjs/useBackButton.js:64:37\n      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)\n      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)\n      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n      23 |   );\n      24 | }\n    > 25 | \n         | ^\n      26 | const styles = StyleSheet.create({\n      27 |   container: {\n      28 |     flex: 1,\n\n      at Object.get View [as View] (node_modules/react-native/index.js:150:12)\n      at App (App.js:25:116)\n      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)\n      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)\n      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n      25 | \n      26 | const styles = StyleSheet.create({\n    > 27 |   container: {\n         |                         ^\n      28 |     flex: 1,\n      29 |     backgroundColor: '#fff',\n      30 |     alignItems: 'center',\n\n      at Object.get Text [as Text] (node_modules/react-native/index.js:122:12)\n      at App (App.js:27:48)\n      at describeNativeComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1024:7)\n      at describeFunctionComponentFrame (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1112:12)\n      at describeFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2640:14)\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n      at Object.useCallback [as Linking] (node_modules/react-native/index.js:246:12)\n      at subscribe (node_modules/@react-navigation/native/lib/commonjs/useLinking.native.tsx:121:33)\n      at node_modules/@react-navigation/native/lib/commonjs/useLinking.native.js:206:12\n      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)\n      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)\n  console.error\n    The above error occurred in the <ForwardRef(NavigationContainerInner)> component:\n    \n        at NavigationContainerInner (/project/node_modules/@react-navigation/native/lib/commonjs/NavigationContainer.tsx:127:4)\n        at App\n    \n    Consider adding an error boundary to your tree to customize error handling behavior.\n    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.\n\n      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)\n      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)\n      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)\n      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)\n      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)\n      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)\n      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)\n

\n

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);
  });
})