react-native - Jest 和 React Native 图标导入问题

Question

我是原生 react 新手，遇到了测试问题。首先我的应用程序运行正常。仅当我想用 Jest 测试我的应用程序并且我的应用程序中有一个图标时，才会出现此问题。

以下消息告诉我，可能存在延迟导入加载，在某些方面与 Jest 冲突，但我不知道如何解决或修复此问题:ReferenceError:您正在尝试在 Jest 环境被拆除后“导入”文件。

我在没有 icon="camera" 的情况下测试了我的应用，并且测试运行良好，因此它与图标非常相关。

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

即使里面有图标，我如何测试我的应用程序？

这是一个重现该错误的最小 App.js:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { Button } from 'react-native-paper';

export default function App() {
  return (
    <PaperProvider>
      <View style={styles.container}>
        <Text>Thi is a test</Text>
        <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
          Press me
        </Button>
        <StatusBar style="auto" />

      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Jest 测试:

import React from 'react';
import renderer from 'react-test-renderer';


import App from './App';

jest.mock('react-native-vector-icons/FontAwesome', () => 'Icon');

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

  });
});

Jest 运行日志:

> @ test C:\Users\slash\workspace\runpick
> jest

Expected react-native/jest-preset to define transform[^.+\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$]
react-native/jest-preset contained different transformIgnorePatterns than expected

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

      at Object.get Text [as Text] (node_modules/react-native/index.js:118:12)
      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:58)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
 PASS  ./App.test.js
  <App />
    √ has 1 child (465ms)

  console.error
    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.
    
    Check the render method of `Icon`.
        in Icon (created by Icon)
        in Icon (at MaterialCommunityIcon.tsx:87)
        in Icon (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Icon))
        in withTheme(Icon) (at Button.tsx:286)
        in View (created by View)
        in View (at Button.tsx:285)
        in View (created by View)
        in View (at Button.tsx:283)
        in View (created by View)
        in View (created by TouchableHighlight)
        in TouchableHighlight (created by ForwardRef)
        in ForwardRef (at TouchableRipple/index.native.tsx:91)
        in TouchableRipple (created by Context.Consumer)
        in ThemedComponent (created by withTheme(TouchableRipple))
        in withTheme(TouchableRipple) (at Button.tsx:267)
        in View (created by View)
        in View (created by AnimatedComponent)
        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
        in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
        in Surface (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Surface))
        in withTheme(Surface) (at Button.tsx:257)
        in Button (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Button))
        in withTheme(Button) (created by App)
        in View (created by View)
        in View (created by App)
        in ThemeProvider (at Provider.tsx:21)
        in View (created by View)
        in View (at PortalHost.tsx:128)
        in Portal.Host (at Provider.tsx:17)
        in Provider (created by App)
        in App

      at warningWithoutStack (node_modules/react/cjs/react.development.js:167:32)
      at warning (node_modules/react/cjs/react.development.js:638:27)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2035:5)
      at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)

  console.error
    The above error occurred in the <Icon> component:
        in Icon (created by Icon)
        in Icon (at MaterialCommunityIcon.tsx:87)
        in Icon (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Icon))
        in withTheme(Icon) (at Button.tsx:286)
        in View (created by View)
        in View (at Button.tsx:285)
        in View (created by View)
        in View (at Button.tsx:283)
        in View (created by View)
        in View (created by TouchableHighlight)
        in TouchableHighlight (created by ForwardRef)
        in ForwardRef (at TouchableRipple/index.native.tsx:91)
        in TouchableRipple (created by Context.Consumer)
        in ThemedComponent (created by withTheme(TouchableRipple))
        in withTheme(TouchableRipple) (at Button.tsx:267)
        in View (created by View)
        in View (created by AnimatedComponent)
        in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
        in ForwardRef(AnimatedComponentWrapper) (at Surface.tsx:70)
        in Surface (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Surface))
        in withTheme(Surface) (at Button.tsx:257)
        in Button (created by Context.Consumer)
        in ThemedComponent (created by withTheme(Button))
        in withTheme(Button) (created by App)
        in View (created by View)
        in View (created by App)
        in ThemeProvider (at Provider.tsx:21)
        in View (created by View)
        in View (at PortalHost.tsx:128)
        in Portal.Host (at Provider.tsx:17)
        in Provider (created by App)
        in App
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
      at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.272s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\slash\AppData\Roaming\npm-cache\_logs\2020-07-07T07_26_11_064Z-debug.log
The terminal process terminated with exit code: 1

Terminal will be reused by tasks, press any key to close it.

Answer 1

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

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

然后确保您的安装文件被您的 jest 配置读取，无论是在 package.json 的 jest block 中还是在您的 jest 配置文件中:

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

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

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

  at Object.get View [as View] (node_modules/react-native/index.js:150:12)
  at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:43)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)

  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted 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.

Check the render method of `Portal.Host`.
    in Portal.Host (created by Provider)
    in Provider (created by App)
    in App".

  at BufferedConsole.error (node_modules/jest-runner/node_modules/@jest/console/build/BufferedConsole.js:165:10)
  at registerError (node_modules/react-native/Libraries/LogBox/LogBox.js:169:15)
  at errorImpl (node_modules/react-native/Libraries/LogBox/LogBox.js:48:23)
  at BufferedConsole.console.error (node_modules/react-native/Libraries/LogBox/LogBox.js:25:15)
  at printWarning (node_modules/react/cjs/react.development.js:315:30)
  at error (node_modules/react/cjs/react.development.js:287:5)
  at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
  at PortalHost.render (node_modules/react-native-paper/lib/commonjs/components/Portal/PortalHost.js:221:16)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7618:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7568:24)


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

  at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/index.js:9:12)
  at Provider.componentWillUnmount (node_modules/react-native-paper/lib/commonjs/core/Provider.js:256:20)
  at callComponentWillUnmountWithTimer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10194:12)
  at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9897:10)
  at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10073:31)

  ●  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 <Context.Provider> component:
    in Portal.Host (created by Provider)
    in Provider (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit to learn more about error boundaries.".


  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted 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.

Check the render method of `Portal.Host`.