我有一个 React Native 应用程序,我试图在其中使用 Jest & Enzyme 编写一些集成测试。我的情况如下,我有一个组件,它使用 getParam
从上一个屏幕获取传递给它的导航参数 - 它正常工作,我只是在努力成功地获取其中的值使用模拟数据。我的代码如下所示:
在我的容器中,我在渲染方法中有这个:
const tickets = navigation.getParam('tickets', null);
然后在我的测试中我有以下内容:
const createTestProps = (testProps: Object, navProps: any = {}) =>
({
navigation: {
navigate: jest.fn(),
getParam: jest.fn(),
...navProps,
},
...testProps,
} as any);
let props = createTestProps(
{},
{
state: {
// Mock navigation params
params: {
tickets: [
{
cellNumber: '123456789',
ticketId: 'xxx',
},
{
cellNumber: '123456789',
ticketId: 'xxx',
},
],
},
},
}
);
const container = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<ThemeProvider theme={theme}>
<TicketSummaryScreen {...props} />
</ThemeProvider>
</MockedProvider>
);
如您所见,我已经尝试模拟实际的导航状态,我已经根据真实组件中实际使用的内容进行了检查,结果基本相同。每次运行测试时,tickets
的值仍然未定义。我猜这与我如何模拟 getParam
函数有关。
有人有什么想法吗?将不胜感激!
最佳答案
我刚刚在我的项目中成功解决了这个问题。我拥有的唯一优势是我可以从我创建的文件中导入 render
方法。这很棒,因为只需更改此文件即可修复我的所有测试。我只需要将一些模拟 Prop 合并到 render
正在接收的组件中。
这是它之前的样子:
/myproject/jest/index.js
export { render } from 'react-native-testing-library'
修复后:
import React from 'react'
import { render as jestRender } from 'react-native-testing-library'
const navigation = {
navigate: Function.prototype,
setParams: Function.prototype,
dispatch: Function.prototype,
getParam: (param, defaultValue) => {
return defaultValue
},
}
export function render(Component) {
const NewComponent = React.cloneElement(Component, { navigation })
return jestRender(NewComponent)
}
这个设置很棒!它只是为我节省了许多重构时间,将来可能会节省更多时间。
关于reactjs - 如何使用 Jest 正确模拟 React Navigation 的 getParam 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56163890/