Question

Screen-test.js

it('renders the Engagement Detail modal', () => {
    const tree = renderer.create(<EngagementDetailModal details={engagementData}/>).toJSON();
    expect(tree).toMatchSnapshot();
})

我要测试的组件

class CompanyDetailView extends React.Component {
    render() {
        const data = this.props.navigation.getParam('details');

        return (
            // rest of the code
        )
    }
}

我的数据变量只是一堆静态数据。使用玩笑，我收到此错误TypeError: Cannot read property 'getParam' of undefined，它指向此行const data = this.props.navigation.getParam('details'); 我知道组件在我运行应用程序时可以正常工作，只是测试失败了。

我认为，仅向Screen-test.js文件中的组件提供道具，就可以使用相同的功能，但是我不确定。我该如何测试？

我也正在像这样onPress={() => this.props.navigation.navigate('EngagementDetailModal', {details: this.props.data})

使用反应导航传递道具

Answer 1

它无法读取导航的属性getParam，因为您尚未模拟导航。因此，当测试用例运行时，它不知道this.props.navigation会做什么。在 Screen-test.js 中添加以下“导入后”部分。

 const testProps = props => ({

  navigation: {navigate: jest.fn(), getParam : jest.fn()},
  ...props,
})

希望这会有所帮助！

将道具传递给组件以用于测试SnapShot

1 个答案: