Как проверить нажатие кнопки в React с помощью TypeScript, Jest и Enzyme

Question

Я создаю приложение React Native с помощью TypeScript.Я делаю свои тесты компонентов, используя Jest и Enzyme.Я также использую React Navigation

Я пытаюсь написать модульный тест для нажатия моей кнопки.

Вот код компонента (только функция рендеринга):

  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <Button
          raised
          title={strings.painButtonTitle}
          buttonStyle={styles.painButton}
          titleStyle={styles.title}
          onPress={() => navigation.navigate("QuestionsScreen")}
        />
      </View>
    );
  }

Теперь приведем модульное тестирование.

  describe("interaction", () => {
    let wrapper: ShallowWrapper;
    let props: Props;
    beforeEach(() => {
      props = createTestProps({});
      wrapper = shallow(<HomeScreen {...props} />);
    });

    describe("clicking the Pain Button", () => {
      it("should navigate to the 'QuestionsScreen'", () => {
        wrapper.find("Button").simulate("click");

        expect(props.navigation.navigate).toHaveBeenCalledTimes(1);
      });
    });
  });

Сбой и утверждение о том, что функция navigation.navigate, которая проверяется с помощью jest.fn (), никогда не вызывается.

Я предполагаю, что это как-то связано с предоставлением функции ошибки кнопке.Проблема в том, что я не могу этого не делать, поскольку мне нужно позвонить с аргументом "QuestionsScreen".Поэтому я не могу сделать что-то вроде onPress={this.navigation.navigate), а затем чудесным образом позвонить "QuestionsScreen", могу ли я?

Как я могу пройти этот тест?

Answer 1

У меня был похожий вопрос с вами.Я попытался simulate("click"), но не смог, потому что нет свойства onClick компонента.

Мой способ состоял в том, чтобы изменить контрольный пример на wrapper.find("form").simulate("submit"), потому что моя навигационная функция была определена в свойстве submit формы.

Answer 2

В разделе «Common Gotchas» для simulate говорится, что «хотя имя подразумевает, что это имитирует фактическое событие, .simulate () будет на самом деле нацеливаться на опору компонента на основе события, которое вынапример, .simulate ('click') фактически получит реквизит onClick и вызовет его. "

Такое поведение можно увидеть в Enzyme исходном коде здесь и здесь .

Таким образом, строка wrapper.find("Button").simulate("click"); заканчивается попыткой вызвать onClick опору Button, которая не существует, поэтому по сути ничего не делает.

Этот пост от разработчика Airbnb рекомендует напрямую вызывать реквизиты и избегать simulate.

Вот модифицированный тест, который напрямую вызывает реквизит onPress:

it("should navigate to the 'QuestionsScreen'", () => {
  wrapper.find(Button).props().onPress({} as any);

  expect(props.navigation.navigate).toHaveBeenCalledTimes(1);   // SUCCESS
});