reactjs - 如何使用 Jest 正确模拟 React Navigation 的 getParam 方法

Question

我有一个 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 函数有关。

有人有什么想法吗？将不胜感激!

Answer 1

我刚刚在我的项目中成功解决了这个问题。我拥有的唯一优势是我可以从我创建的文件中导入 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)
}

这个设置很棒!它只是为我节省了许多重构时间，将来可能会节省更多时间。