Как установить локальное состояние компонента при тестировании с использованием jest и реагировать на тестирование библиотеки?

Question

Используя фермент AirBnB, мы можем установить состояние компонента:

const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true });

Я хочу сделать то же самое, используя реагирующую библиотеку.

Спасибо!

Answer 1

Вы не можете сделать это с помощью реагирующей на тестирование библиотеки. Это потому, что RTL хочет, чтобы вы протестировали свой компонент, как это сделал бы пользователь.

Что это значит? В реальной жизни ваш компонент изменит состояние после того, как что-то произойдет. Возможно, пользователь ввел неправильные данные или API вернул код ошибки.

Вместо непосредственного изменения состояния вы должны попытаться воспроизвести набор действий, которые изменяют состояние.

Этот подход немного сложнее реализовать, чем предлагает Enzyme, но ваши тесты будут более надежными. Это потому, что вы собираетесь протестировать весь поток, а не просто сосредоточиться на том, что визуализируется при возникновении определенного состояния.

Кроме того, скажем, вы реорганизуете свой код и изменяете, как работает состояние. RTL-тесты будут безразличны, пока взаимодействие пользователей с вашим приложением одинаково. Тест на фермент не пройдет, потому что он больше не знает, как взаимодействовать с внутренними компонентами вашего компонента.