Jest 和 React Native 图标导入问题

Question

我是原生反应新手，遇到了测试问题。\n首先，我的应用程序运行正常。\n只有当我想用玩笑测试我的应用程序并且我的应用程序中有图标时，才会出现该问题。

\n

以下消息告诉我，可能存在延迟导入加载，在某些方面与笑话冲突，但我不知道如何解决或修复此问题：\nReferenceError: You are trying to 'import' a file after the Jest environment has been torn down.

\n

我已经测试了我的应用程序，icon="camera"并且测试运行良好，因此它与图标非常相关。

\n

该应用程序还使用react-native-paper。

\n

即使应用程序中有图标，我如何测试它？

\n

这是重现该错误的最小 App.js：

\n

import { StatusBar } from 'expo-status-bar';\nimport React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport { Button } from 'react-native-paper';\n\nexport default function App() {\n  return (\n    <PaperProvider>\n      <View style={styles.container}>\n        <Text>Thi is a test</Text>\n        <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>\n          Press me\n        </Button>\n        <StatusBar style="auto" />\n\n      </View>\n    </PaperProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n

\n

笑话测试：

\n

import React from 'react';\nimport renderer from 'react-test-renderer';\n\n\nimport App from './App';\n\njest.mock('react-native-vector-icons/FontAwesome', () => 'Icon');\n\ndescribe('<App />', () => {\n  it('has 1 child', () => {\n    const tree = renderer.create(<App />).toJSON();\n    expect(tree.children.length).toBe(1);\n\n  });\n});\n

\n

笑话运行日志：

\n

> @ test C:\\Users\\slash\\workspace\\runpick\n> jest\n\nExpected react-native/jest-preset to define transform[^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]\nreact-native/jest-preset contained different transformIgnorePatterns than expected\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n      at Object.get Text [as Text] (node_modules/react-native/index.js:118:12)\n      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)\n      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)\n      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)\n      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)\n PASS  ./App.test.js\n  <App />\n    \xe2\x88\x9a has 1 child (465ms)\n\n  console.error\n    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.\n    \n    Check the render method of `Icon`.\n        in Icon (created by Icon)\n        in Icon (at MaterialCommunityIcon.tsx:87)\n        in Icon (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Icon))\n        in withTheme(Icon) (at Button.tsx:286)\n        in View (created by View)\n        in View (at Button.tsx:285)\n        in View (created by View)\n        in View (at Button.tsx:283)\n        in View (created by View)\n        in View (created by TouchableHighlight)\n        in TouchableHighlight (created by ForwardRef)\n        in ForwardRef (at TouchableRipple/index.native.tsx:91)\n        in TouchableRipple (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(TouchableRipple))\n        in withTheme(TouchableRipple) (at Button.tsx:267)\n        in View (created by View)\n        in View (created by AnimatedComponent)\n        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))\n        in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)\n        in Surface (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Surface))\n        in withTheme(Surface) (at Button.tsx:257)\n        in Button (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Button))\n        in withTheme(Button) (created by App)\n        in View (created by View)\n        in View (created by App)\n        in ThemeProvider (at Provider.tsx:21)\n        in View (created by View)\n        in View (at PortalHost.tsx:128)\n        in Portal.Host (at Provider.tsx:17)\n        in Provider (created by App)\n        in App\n\n      at warningWithoutStack (node_modules/react/cjs/react.development.js:167:32)\n      at warning (node_modules/react/cjs/react.development.js:638:27)\n      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2035:5)\n      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)\n      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)\n      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)\n      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)\n\n  console.error\n    The above error occurred in the <Icon> component:\n        in Icon (created by Icon)\n        in Icon (at MaterialCommunityIcon.tsx:87)\n        in Icon (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Icon))\n        in withTheme(Icon) (at Button.tsx:286)\n        in View (created by View)\n        in View (at Button.tsx:285)\n        in View (created by View)\n        in View (at Button.tsx:283)\n        in View (created by View)\n        in View (created by TouchableHighlight)\n        in TouchableHighlight (created by ForwardRef)\n        in ForwardRef (at TouchableRipple/index.native.tsx:91)\n        in TouchableRipple (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(TouchableRipple))\n        in withTheme(TouchableRipple) (at Button.tsx:267)\n        in View (created by View)\n        in View (created by AnimatedComponent)\n        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))\n        in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)\n        in Surface (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Surface))\n        in withTheme(Surface) (at Button.tsx:257)\n        in Button (created by Context.Consumer)\n        in ThemedComponent (created by withTheme(Button))\n        in withTheme(Button) (created by App)\n        in View (created by View)\n        in View (created by App)\n        in ThemeProvider (at Provider.tsx:21)\n        in View (created by View)\n        in View (at PortalHost.tsx:128)\n        in Portal.Host (at Provider.tsx:17)\n        in Provider (created by App)\n        in App\n    \n    Consider adding an error boundary to your tree to customize error handling behavior.\n    Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.\n\n      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)\n      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)\n      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)\n      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)\n      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)\n      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)\n      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        4.272s\nRan all test suites.\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! @ test: `jest`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the @ test script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\slash\\AppData\\Roaming\\npm-cache\\_logs\\2020-07-07T07_26_11_064Z-debug.log\nThe terminal process terminated with exit code: 1\n\nTerminal will be reused by tasks, press any key to close it.\n

\n

Answer 1

创建一个包含以下内容的 jest 设置文件，或将其添加到现有的 jest 设置文件中：

\n

jest.mock(\'react-native-paper\');\n

\n

然后确保您的 jest 配置正在读取您的设置文件，无论是在您的 jest 配置文件jest的块中package.json还是在您的 jest 配置文件中：

\n

module.exports = {\n  preset: \'react-native\',\n  setupFiles: [\'./pathToJestSetupFile.js\'],\n  ...\n}\n

\n

执行上述操作修复了我看到的与您类似的以下错误：

\n

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n  at Object.get View [as View] (node_modules/react-native/index.js:150:12)\n  at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:43)\n  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)\n  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)\n  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)\n\n  \xe2\x97\x8f  Cannot log after tests are done. Did you forget to wait for something async in your test?\nAttempted to log "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.\n\nCheck the render method of `Portal.Host`.\n    in Portal.Host (created by Provider)\n    in Provider (created by App)\n    in App".\n\n  at BufferedConsole.error (node_modules/jest-runner/node_modules/@jest/console/build/BufferedConsole.js:165:10)\n  at registerError (node_modules/react-native/Libraries/LogBox/LogBox.js:169:15)\n  at errorImpl (node_modules/react-native/Libraries/LogBox/LogBox.js:48:23)\n  at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:25:15)\n  at printWarning (node_modules/react/cjs/react.development.js:315:30)\n  at error (node_modules/react/cjs/react.development.js:287:5)\n  at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)\n  at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:16)\n  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)\n  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)\n\n\nReferenceError: You are trying to `import` a file after the Jest environment has been torn down.\n\n  at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/index.js:9:12)\n  at Provider.componentWillUnmount (node_modules/react-native-paper/lib/commonjs/core/Provider.js:256:20)\n  at callComponentWillUnmountWithTimer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10194:12)\n  at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9897:10)\n  at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10073:31)\n\n  \xe2\x97\x8f  Cannot log after tests are done. Did you forget to wait for something async in your test?\nAttempted to log "The above error occurred in the <Context.Provider> component:\n    in Portal.Host (created by Provider)\n    in Provider (created by App)\n    in App\n\nConsider adding an error boundary to your tree to customize error handling behavior.\nVisit to learn more about error boundaries.".\n\n\n  \xe2\x97\x8f  Cannot log after tests are done. Did you forget to wait for something async in your test?\nAttempted to log "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.\n\nCheck the render method of `Portal.Host`.\n

\n