Итак, вы создали замечательный компонент React, который отображает группу кнопок. Наконец, компонент Button, написанный вашим коллегой Бобом, действительно для чего-то полезен!
Но вам нужно будет написать несколько модульных тестов на тот случай, если Боб сломает ваш компонент в одном из своих пресловутых циклов рефакторинга.
Один из способов сделать это - визуализировать компонент и протестировать вывод, но это означает, что вы будете тестировать компонент Button Боба, а также свой собственный код. Каждый раз, когда кто-то меняет Button, ваши тесты будут терпеть неудачу, даже если ваш компонент по-прежнему работает безупречно.
К счастью, команда React ввела неглубокий рендеринг для решения этой проблемы. Это позволяет вам визуализировать компонент, оставляя подкомпоненты как неотрисованный JSX. Это означает, что вы можете писать такие модульные тесты:
Обратите внимание, как компонент Button остается непрозрачным, поэтому нам не нужно беспокоиться о том, как его JSX будет отображаться. Мы можем просто проверить, что он рендерится в нужном месте, нужное количество раз, с правильными реквизитами.
Еще лучше, поскольку наш компонент ButtonGroup теперь чистый, мы можем использовать параметризованные тесты; мы говорим, какие параметры мы передаем компоненту, и указываем результат, который мы ожидаем визуализировать, например когда мы передаем true для свойства disabled, мы ожидаем, что div btn-group будет отображаться с атрибутом disabled. Это упрощает и ускоряет написание модульных тестов.
Но как?
Пока что все, что мы сделали, это создали массив, описывающий наши тесты. Нам все еще нужно написать функцию testComponent, которая неглубоко отображает наш компонент и сравнивает вывод с нашим «ожидаемым» параметром.
Для этого нам понадобятся два новых инструмента: неглубокий рендеринг и jsxChai Брэндона Конкла.
Так что здесь происходит?
Мы импортируем библиотеку ReactTestUtils, которая даст нам возможность неглубоко отрисовывать наш компонент, чтобы мы могли сравнить визуализированный результат с нашим ожидаемым значением.
Мы также импортируем Chai и jsxChai, которые будем использовать для проверки равенства между ожидаемым и фактическим результатом. По умолчанию Chai не понимает JSX, поэтому мы говорим ему использовать jsxChai.
Тестовый компонент принимает единственный аргумент, который представляет собой массив объектов, каждый из которых имеет «компонент» и «ожидаемое» свойство. Мы будем перебирать этот массив для запуска каждого теста.
ReactTestUtils имеет метод createRenderer, который позволяет нам создавать средство визуализации с возможностью поверхностного отрисовки. Когда мы передаем наш компонент методу визуализации средства визуализации, он будет отображать только верхний уровень JSX и оставит все подкомпоненты неотрисованными. Затем мы можем получить результат и присвоить его переменной, вызвав getRenderedOutput.
Наконец, мы используем chai для сравнения визуализированного вывода с тем, что мы ожидали.
Теперь у нас есть функция testComponent, и мы можем писать параметризованные тесты для всех наших реагирующих компонентов. Боб мог бы даже использовать его для проверки Баттона.
