reactjs - 如何用 Jest 模拟 react 导航参数值

Question

我是 Jest 新手，我正在尝试测试组件的呈现，但是由于 react 导航，我在模拟它接收到的参数时遇到了问题。

这是测试:

describe('<GameScreen /> tests', () => {
it('Render the component correctly ', () => {

    const route = {
      isAccesibilityModeOn: false
    }
    const navigate = jest.fn();
    const tree = renderer.create(<GameScreen route= {route} navigation={{ navigate }} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

这是我的组件，它接收变量 isAccessibilityModeOn 形式的 bool 值:

export default function GameView({route, navigation}) {

  const {isAccesibilityModeOn} = route.params;'
  
 return(<Text>Hello</Text>)
}

控制台给我的错误是这样的

TypeError: Cannot read property 'isAccesibilityModeOn' of undefinedJest

那么问题来了，如何模拟组件的参数值呢？

Answer 1

查看作为 prop 传递的 route 对象 - 它缺少 params 属性。在组件中，您尝试访问未知 params 的 isAccessibilityModeOn 属性，因此您会看到此错误。