如何使用酶笑话在react native中为导航堆栈编写单元测试用例

Question

我是一个刚开始反应本机并尝试编写单元测试用例的人。我能够编写快照测试用例，但不知道如何为导航堆栈编写单元测试用例。

有什么方法可以编写用于导航的单元测试用例吗？

navigator.js

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import HomeScreen from '../component/HomeComponent/home';
import ThumbnailView from '../component/ThumbnailComponent/thumbnailView';
import AlbumDetailsView from '../component/AlbumDetailsComponent/albumDetailsView';
const MainNavigator = createStackNavigator({
HomeScreen: { screen: HomeScreen },
ThumbnailViewScreen: { screen: ThumbnailView },
AlbumDetailsViewScreen: { screen: AlbumDetailsView },
},
{
defaultNavigationOptions: {
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#0c82f3',
},
headerTitleStyle: {
fontWeight: 'bold',
},
},
});
const NavigationApp = createAppContainer(MainNavigator);
export default NavigationApp;

Answer 1

您可以在组件中测试navigate功能，如下所示：

import HomeScreen from '../component/HomeComponent/home';
import { shallow, ShallowWrapper } from "enzyme";
import React from "react";
import { View } from "react-native";
const createTestProps = (props) => ({
navigation: {
navigate: jest.fn()
},
...props
});
describe("HomeScreen", () => {
describe("rendering", () => {
let wrapper;
let props;
beforeEach(() => {
props = createTestProps({});
wrapper = shallow(<HomeScreen {...props} />);
});
it("should render a <View /> and go to ThumbnailViewScreen", () => {
expect(wrapper.find(View)).toHaveLength(1);   // Some other tests
expect(props.navigation.navigate).toHaveBeenCalledWith('ThumbnailViewScreen');  // What you want
});
});
});

HomeScreen.js:

import React, { Component } from "react";
import { Text, View } from "react-native";
export class HomeScreen extends Component {
componentDidMount = () => {
this.props.navigation.navigate("ThumbnailViewScreen");
};
render() {
return (
<View>
<Text>This is the HomeScreen.</Text>
</View>
);
}
}
export default HomeScreen;

您可以在这里找到更多详细信息