【发布时间】：2020-07-07 08:05:42
【问题描述】：
我是本机反应的新手，但遇到了一个测试问题。 首先我的应用程序运行正确。 只有当我想用 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.
【问题讨论】：
-
这个问题看起来非常相似，虽然它不在同一个堆栈上：github.com/GeekyAnts/NativeBase/issues/2657
-
你找到解决办法了吗？
-
很遗憾，没有，我通过不在 CI conf 上运行测试来解决这个问题。现在手动运行它们
标签： react-native jestjs icons react-native-paper