[英]How to test React Native component with NavigationEvents in jest
如何为包含NavigationEvents
子组件的 React Native 组件编写玩笑单元测试。
我得到的错误是
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9215
The above error occurred in the <Context.Consumer> component:
in withNavigation(NavigationEvents) (created by MyComponent)
in View (created by View)
in View (created by MyComponent)
in MyComponent
Consider adding an error boundary to your tree to customize error handling behavior.
● MyComponent test › renders
Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.
下面是导致错误的最小示例。
import 'react-native';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import React from 'react';
import renderer from 'react-test-renderer';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<NavigationEvents/>
</View>
);}
}
describe('MyComponent test', () => {
it('renders', () => {
jest.mock('react-navigation', () =>({
NavigationEvents: 'mockNavigationEvents',
withNavigation: component => component
}));
const navigation = { navigate: jest.fn() };
renderer.create(<MyComponent navigation={navigation}/>);
});
});
根据评论中的要求,在下面添加了package.json
:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/samples": "2.1.1",
"@expo/vector-icons": "^10.0.0",
"expo": "^35.0.0",
"expo-camera": "~7.0.0",
"expo-sqlite": "^7.0.0",
"moment": "^2.24.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-action-button": "^2.8.5",
"react-native-calendar-picker": "^6.0.0",
"react-native-dialog": "^5.6.0",
"react-native-dotenv": "^0.2.0",
"react-native-dynamic-search-bar": "^0.1.11",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "~1.3.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-modal-datetime-picker": "^7.4.0",
"react-native-paper": "^2.15.2",
"react-native-progress-circle": "^2.1.0",
"react-native-search-bar": "^3.4.2",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.0.9",
"expo-constants": "~7.0.0",
"expo-file-system": "~7.0.0"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0",
"jest-expo": "^35.0.0"
},
"private": true
}
$ expo-cli -V
3.13.1
问题是jest.mock
必须在describe
之外并且it
起作用。 您不需要手动模拟navigation
对象,因为您正在模拟withNavigation
HOC 函数:
// Setup mocks outside describe and it functions
jest.mock('react-navigation', () =>({
NavigationEvents: 'mockNavigationEvents',
withNavigation: component => component
}));
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<NavigationEvents/>
</View>
);
}
}
describe('MyComponent test', () => {
it('renders', () => {
renderer.create(<MyComponent/>);
});
});
renders
测试通过:
我建议你将所有这些setupFilesAfterEnv
放在一个文件中,并在package.json
设置setupFilesAfterEnv
:
package.json
> jest
:"jest": {
"preset": "jest-expo"
"setupFilesAfterEnv": ["./path/to/jestInit.js"]
},
jestInit.js
:jest.mock('react-navigation', () =>({
NavigationEvents: 'mockNavigationEvents',
withNavigation: component => component
}));
这样,您将拥有每个 Jest 测试文件的模拟,而不必在每个测试文件中包含模拟。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.