1

我是本机反应的新手,我遇到了一个测试问题。首先我的应用程序运行正确。仅当我想用 jest 测试我的应用程序并且当我的应用程序中有一个图标时才会出现此问题。

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

我已经测试了我的应用程序,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',
  },
});

开玩笑的测试:

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

  });
});

开玩笑的运行日志:

> @ 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.
4

1 回答 1

4

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

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

然后确保你的 jest 配置正在读取你的设置文件,无论是在你的 jest 配置文件的jest块中package.json还是在你的 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`.
于 2020-10-08T03:42:00.503 回答