使用 React Native 测试 React Navigation 的类型安全答案

【问题标题】：Type Safety for Testing React Navigation with React Native使用 React Native 测试 React Navigation 的类型安全
【发布时间】：2021-08-19 22:20:05
【问题描述】：

导航器

export type RootStackNavigator = {
   Welcome: undefined
   List: undefined
}

const Stack = createStackNavigator<RootStackNavigator>()
const { Navigator, Screen } = Stack

const Navigation = () => {
   return (
      <NavigationContainer>
         <Navigator initialRouteName={'Welcome'} headerMode="none">
            <Screen name="Welcome" component={Welcome} />
            <Screen name="List" component={List} />
         </Navigator>
      </NavigationContainer>
   )
}

欢迎屏幕

interface WelcomeProps {
   navigation: StackNavigationProp<RootStackNavigator, 'Welcome'>
}

const Welcome = ({ navigation }: WelcomeProps) => {
   return (
      <Screen style={styles.screen}>
         <TouchableWithoutFeedback onPress={() => navigation.navigate('List')} testID="touchable" style={styles.touchable}>
            etc ...
         </TouchableWithoutFeedback>
      </Screen>
   )
}

测试

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

有了这一切，我从打字稿中得到了这个错误：

Type '{ navigate: jest.Mock<any, any>; }' is not assignable to type 'StackNavigationProp<RootStackNavigator, "Welcome">'.

我该如何解决这个问题？

我正在尝试测试是否在应用程序呈现列表屏幕组件的屏幕中单击。

谢谢。

PS：顺便说一句，测试通过了

【问题讨论】：

我忘了说反正测试通过了

标签： typescript react-native react-navigation react-native-testing-library

【解决方案1】：

我也有同样的问题。我找到了一种方法，但我不确定它是最好的还是正确的方法。

我所做的只是从导航道具中添加使用过的功能。我使用Pick 做到了，如下所示：

type PrivateScreenProps = {
  navigation: Pick<
    StackNavigationProp<MainStackRoutesType, Navigation.MainRoutes.PRIVATE>,
    'navigate'
  >;
};

export const PrivateScreen = ({ navigation }: PrivateScreenProps) => {
}

这只会在导航中添加导航功能。因此，在测试中我只需要在导航模拟中定义导航功能。

const navigation = {
  navigate: jest.fn(),
};

render(<PrivateScreen navigation={navigation} />);

如果我需要使用像goBack这样的另一个函数，我在类型中添加它：

type PrivateScreenProps = {
  navigation: Pick<
    StackNavigationProp<MainStackRoutesType, Navigation.MainRoutes.PRIVATE>,
    'navigate' | 'goBack'
  >;
};

// in tests
const navigation = {
  navigate: jest.fn(),
  goBack: jest.fn(),
};

【讨论】：