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();
});

Answer 2

这更像是上述解决方案的补充。如果要测试，则在导航标题按钮上说onPress事件。除了above解决方案之外，您可以毫无问题地访问它们，只需执行以下操作即可：

navigationOptions.headerLeft.props.onPress()

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

2 个答案: