Модульное тестирование компонентов React не всегда легко. В этой короткой статье я покажу некоторые уловки, которые с помощью Enzyme могут немного облегчить нашу жизнь.
В проекте, над которым я работаю, мы тестируем каждый уровень иерархии компонентов с помощью поверхностного рендеринга и тестирования снимков. Таким образом, если что-то тормозит в компоненте низкого уровня, тесты, которые полагаются на этот компонент, не потерпят неудачу, и вы сможете быстро определить проблему.
Мы стремимся достичь высокого уровня покрытия, поэтому, если у нас есть Большая часть системы покрыта мелкими визуализированными компонентами, вы легко увидите любые изменения, которые имеют эффект, которого вы не ожидали.
В этой стратегии тестирования вы, вероятно, захотите увидеть модель DOM, которую создает компонент, включая CSS, чтобы Jest мог кричать о любых изменениях в этих аспектах. Давайте попробуем создать простой тест снимка, например, используя стилизованные компоненты.
Для этого простого стилизованного компонента:
И с помощью этого простого теста:
У нас получится такой сверхъестественный снимок:
Если вы присмотритесь, вы можете увидеть представление файла css. Но так не пойдет ... Очень много шума, и будет трудно понять, что на самом деле изменилось. Кроме того, он не будет улавливать интерполированные значения, что делает невозможным тестирование стилизованного компонента в различных ситуациях.
Enzyme спешит на помощь!
Решением этой проблемы является использование функции фермента dive (). Это дает нам возможность заглянуть за слои объектов, которыми стилизованные компоненты (или любой другой инструмент в этом отношении) обертывают наши компоненты.
Попробуем dive ():
Это еще хуже! Это какая-то общая обертка без каких-либо css. Не совсем то, что мы ожидали увидеть. Но не волнуйтесь, тьма всегда предшествует свету, так что давайте попробуем нырнуть еще раз:
Ну это то же самое. Еще нет. Еще одно погружение!
Наконец-то! мы нашли наш элемент div, но не CSS :(
Чтобы преодолеть это и увидеть настоящий CSS, мы можем использовать jest-styled-components, которые превратят приведенный выше снимок в эту прекрасную вещь:
Здесь описывается все, что мы хотели знать о рендеринге компонента - тот факт, что это div, и собственно CSS.
Объем погружений, которые нам предстоит совершить, варьируется от проекта к проекту и даже от его компонентов. Существуют стилизованные компоненты, которые обертывают другие стилизованные компоненты или другие обычные компоненты. Чтобы минимизировать дублирование кода и обслуживание, мы создали настраиваемую функцию рендеринга, которая рекурсивно ныряет, пока не достигнет базового элемента. Код выглядит примерно так:
Мы обнаружили, что эта формула работает для всех наших стилизованных компонентов в проектах, даже при использовании сторонних библиотек компонентов.
Надеюсь, вы найдете это полезным!
