typescript - 如何在使用 React Navigation 和 TypeScript 时使用 Jest 和 Enzyme 对静态 navigationOptions 进行单元测试？

Question

我正在使用 TypeScript 构建一个 React Native 应用程序。我正在使用 Jest 和 Enzyme 进行组件测试。我也在使用 React Navigation。

我的一个屏幕有以下 navigationOptions :

static navigationOptions = ({ navigation }: NavigationScreenProps) => ({
headerLeft: Platform.select({
  android: (
    <Icon
      name="md-menu"
      type="ionicon"
      containerStyle={styles.icon}
      onPress={navigation.toggleDrawer}
    />
  ),
  ios: null
}),
headerTitle: strings.homeTitle

});

我想编写单元测试以确保 <Icon />组件被渲染。类似于这里:

const props = createTestProps({});
const wrapper = shallow<HomeScreen>(<HomeScreen {...props} />);

it("should render a <View />", () => {
  expect(wrapper.find(View)).toHaveLength(1);
});

我的问题是，我想不出选择器来选择它。如何选择 static navigationOptions ？

我也试过像这样检查 wrapper :

expect(wrapper.instance().navigationOptions)

但是包装器的实例没有导航选项。

Answer 1

由于它是静态函数，您可以在不创建新实例的情况下调用它。

test('navigation options', () => {
  const naviProp = { navigation: { navigate: () => {} } };
  const navigationOptions = HomeScreen.navigationOptions(naviProp);

  expect(navigationOptions).toMatchSnapshot();
});