Как смоделировать нажатие компонента React Native Switch с помощью Jest и Enzyme

Question

Я пытаюсь протестировать компонент React Native, который по сути является оберткой для Switch .

Это выглядит так (стили и дополнительный код удалены):

  render() {
    return (
      <View>
        <View>
          <View>
            <Switch
              onValueChange={() => this.onChange(!this.state.value)}
              value={this.state.value}
            />
          </View>
        </View>
      </View>
    );
  }

Этот компонент не имеет самого метода onChange, но класс, который он расширяет, имеет.Я хочу убедиться, что когда я нажимаю на этот переключатель, onChange вызывается с правильным значением (т. Е. С true или false).

Мой тест выглядит следующим образом (я добавилподдельный onChange метод для упрощения проверки действия прессы):

  it('calls onChange with proper values when pressed', () => {
    const onChangeHandler = jest.fn();
    const wrapper = shallow(
      <Toggle />
    );

    wrapper.instance().onChange = onChangeHandler;
    wrapper.simulate('press');


    expect(wrapper.instance().onChange).toBeCalledWith(true);
  });

Однако этот тест не пройден, и onChange не вызывается.Я не уверен, где ошибка в моем тесте.

Answer 1

Я обнаружил, что мне не нужно имитировать нажатие, но вместо этого я могу имитировать onValueChange (то есть то, что срабатывает при нажатии переключателя).

Первый Iнайдите мой Switch компонент в моем тесте, используя testID реквизит, который я ему дал:

const Switch = wrapper.find('[testID="switch"]');

И затем я использую это, чтобы обойти имитацию нажатия и вместо этого имитировать onChange:

Switch.simulate('valueChange');

По сути, это тот же результат, что и при тестировании пресса, и работает для меня!