React Native测试React Navigation时类型不兼容报错如何解决

你传入的mock导航对象仅包含navigate方法，而StackNavigationProp<RootStackNavigator, "Welcome">类型定义了导航对象的全部内置方法（如goBack、push、pop等），因此触发类型不匹配报错。

以下是几种常用的处理方案：

• 方案1：类型断言（最快适配）
  直接将mock的导航对象断言为目标类型，无需修改现有测试逻辑：

  describe('Welcome Screen', () => {
    it('Navigates to List Screen when clicked', () => {
      const navigate = jest.fn()
      const { getByTestId } = render(<Welcome navigation={{ navigate } as StackNavigationProp<RootStackNavigator, 'Welcome'>} />)
      fireEvent.press(getByTestId('touchable'))
      expect(navigate).toBeCalledWith('List')
    })
  })
  

• 方案2：Partial类型二次断言（更灵活）
  先通过Partial声明仅实现部分导航方法，再二次断言为完整类型，后续新增用到的导航方法时可直接扩展：

  describe('Welcome Screen', () => {
    it('Navigates to List Screen when clicked', () => {
      const mockNavigation = {
        navigate: jest.fn()
      } as Partial<StackNavigationProp<RootStackNavigator, 'Welcome'>> as StackNavigationProp<RootStackNavigator, 'Welcome'>
  
      const { getByTestId } = render(<Welcome navigation={mockNavigation} />)
      fireEvent.press(getByTestId('touchable'))
      expect(mockNavigation.navigate).toBeCalledWith('List')
    })
  })
  

• 方案3：使用官方测试容器（最规范，推荐）
  直接使用React Navigation官方提供的MockNavigationContainer包裹测试组件，无需手动mock导航属性，类型完全匹配，更贴近实际运行场景：

  import { MockNavigationContainer } from '@react-navigation/native/testing'
  
  describe('Welcome Screen', () => {
    it('Navigates to List Screen when clicked', () => {
      const { getByTestId } = render(
        <MockNavigationContainer>
          <Stack.Navigator initialRouteName="Welcome">
            <Stack.Screen name="Welcome" component={Welcome} />
            <Stack.Screen name="List" component={jest.fn()} />
          </Stack.Navigator>
        </MockNavigationContainer>
      )
      fireEvent.press(getByTestId('touchable'))
      // 可直接通过MockNavigationContainer提供的API验证跳转状态
    })
  })
  

内容的提问来源于stack exchange，提问作者User