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

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

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

Я хочу сделать то же самое, используя библиотеку тестирования реакции.

Спасибо!


person Rishabh    schedule 09.01.2019    source источник
comment
react-testing-library предназначена для тестирования черного ящика, т.е. тест не должен знать о внутренностях компонента. Если это не подходит для вашего случая, используйте Enzyme.   -  person Estus Flask    schedule 09.01.2019


Ответы (1)


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

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

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

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

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

person Giorgio Polvara - Gpx    schedule 09.01.2019
comment
Я полностью согласен с этим ответом. - person Ruffeng; 14.02.2019