Comments 13
Второй способ плох [...] еще тем, что это не вполне корректно (реально действия пользователя часто вызывают сразу несколько событий [...])
Что вы имеете здесь в виду? Например, есть кнопка
<Button onClick={this.handleButtonClick} />
на нее можно кликнуть в тесте
component.find('Button').simulate('click')
На мой взгляд, все корректно. Есть интерактивный элемент, мы сымитировали клик по нему. Какие дополнительные события мог вызвать реальный пользователь, а мы их не протестировали?
2) TheShock привел пример. Понятно что этот hover может быть и не обрабатывается в приложении, но факт тот, что мы с одной стороны как бы «имитируем событие», а с другой, в реальной жизни оно в таком виде и одно — не возникает. А вызов метода «пользователь нажал на кнпоку» — это уже чуть выше по уровню абстракции и можно там игнорировать какую-то специфику работы браузера (ненужные нам события).
Зато если тестировать через метод, не нажимая на кнопку, то может так получиться, что кнопки в UI не видно, пользователь на нее нажать не может, а тест успешно проходит. Например, если на кнопке есть атрибут disabled
или просто условие, по которому она не показывается.
Не вижу смысла параноить по поводу того, что simulate
это не совсем честный клик. Другие события, кроме клика, используются очень редко, а вот условный показ контрола — почти в каждой форме.
На самом деле проверка того что кнопку нажать не получается — это интеграционный тест. Он проверяет 1) классы 2) получившиеся в результате атрибуты 3) какие-то контролы которые возможно кнопку закрывают на экране (те же модалки всякие), и тд; может, для этого даже лучше прикручивать всякие разные селениумы, которые для интеграционного и предназначены?
Да, disabled атрибут учитывается, если использовать mount, и игнорируется если пользоваться shallow:
https://github.com/airbnb/enzyme/issues/386
Тестируйте такие кейсы в mount и будет все нормально.
Однако, вернемся к вопросу, как лучше тестировать: через (как бы)публичный метод или взаимодействие с разметкой.
Из моего опыта кажется, что через разметку будет лучше. В React-компонентах верстка расположена вместе с js-кодом, поэтому компонент очень удобно рассматривать как черный ящик. Мы рендерим его с некоторыми пропсами, потом взаимодействуем через отрендеренный UI. Для поиска элемента приходит на помощь паттерн page object, вот его пример его использования в контексте React.
В подходе же с публичными методами придется специально держать методы доступными только для тестирования (что уже подозрительно), кроме того, придется написать дополнительные тесты, чтобы проверить еще и отрендеренный UI. В итоге это получается whitebox-тестирование, которые тоже иногда допустимо, но его сложнее смаппить на реальные пользовательские сценарии, чем blackbox.
Если ваш опыт говорит, что без проблем можно действовать через симуляцию enzyme и component.find — возможно, так и следует делать, а не как я предложил.
ReactJS — мое понимание тестирования