Я создаю приложение React Native с TypeScript. Я провожу тесты компонентов с помощью 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.

2
J. Hesters 8 Окт 2018 в 12:24

2 ответа

Лучший ответ

Поскольку это статическая функция, вы можете вызывать ее, не создавая новый экземпляр.

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

  expect(navigationOptions).toMatchSnapshot();
});
8
Moyote 8 Окт 2018 в 13:24

Это больше похоже на дополнение к описанному выше решению. Если вы хотите протестировать, скажем, событие onPress на кнопках заголовка навигации. Вы можете получить к ним доступ без каких-либо проблем, в дополнение к решению выше, просто сделайте что-то вроде этого:

navigationOptions.headerLeft.props.onPress()
0
iWorld 21 Сен 2019 в 00:09