我有一个 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) 
} 

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