Reactjs 如何正确模拟导航'；使用Jest的s getParam方法

我有一个React原生应用程序，我正试图使用Jest和Ezyme编写一些集成测试。我的情况如下，我有一个组件，它使用

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>
  );

const createTestProps=（testProps:Object，navProps:any={}）=>
({
导航：{
导航：jest.fn（），
getParam:jest.fn（），
…导航道具，
},
…测试道具，
}（如有的话）；
让props=createTestProps(
{},
{
声明：{
//模拟导航参数
参数：{
门票：[
{
手机号码：“123456789”，
ticketId:'xxx'，
},
{
手机号码：“123456789”，
ticketId:'xxx'，
},
],
},
},
}
);
常量容器=挂载(
);

正如您所看到的，我试图模拟实际的导航状态，我已经对照实际组件中实际使用的内容进行了检查，结果基本相同。每次运行测试时，

tickets

的值仍然未定义。我猜这与我如何模拟

getParam

函数有关

---

有人有什么想法吗？非常感谢

可以尝试从

getParam

返回模拟数据，然后尝试下面的示例代码

    const parameters = () => {
     return "your value"
    }
     .....
        navigation: {                
            getParam: parameters,
            ... navProps
        },
        ... testProps
    });

---

我刚刚在我的项目中成功地解决了这个问题。我所拥有的唯一优势是从我创建的文件导入了

render

方法。这是一个很好的解决方案，因为我所有的测试都可以通过修改这个文件来修复。我只需要将一些模拟道具合并到

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)
}

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

试试看

const navState = { params: { tickets: 'Ticket1', password: 'test@1234' } }
const navigation = {
    getParam: (key, val) => navState?.params[key] ?? val,
}

---

这里

navState

值将是您正在传递的参数。

在navigation.getParam（'tickets'，null）中进行导航；来自props？如果在createTestProps中，您让getParam返回一些东西，例如：getParam:（）=>MockTicketObject，那么该怎么办？唯一的问题是createTestProps实际上在一个util中，所以我必须对它进行自定义，以允许为您期望从

getParam

中得到的值传入一个自定义函数，希望找到更通用的解决方案