在使用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？

我还尝试过像这样的包装器：

expect(wrapper.instance().navigationOptions)

但是包装器的实例没有navigationOptions。

Answer 1

由于具有静态功能，因此可以在不创建新实例的情况下调用它。

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

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