Я новичок в React, поэтому 2 недели пробовал исследовать и писать модульные тесты. Первое, что я узнал, это то, что эти слова летали на меня повсюду, такие как Redux, Jest, Enzyme, Mocking, Snapshot, сравнение рендеринга… blabla. Перед тем, как мы начнем тестирование, вот замечательная статья поможет вам получить обзор тестирования Javascript.

В нашем проекте мы использовали Redux. Вот отличная статья, чтобы начать писать тест на Redux. В этом посте они рекомендуют протестировать некоторые функции:

  • Компонент рендеринга
  • Подключенный компонент
  • Создатели действий
  • Создатели асинхронных действий
  • Редукторы
  • Промежуточное ПО

В этой первой статье я сосредоточусь на тестировании компонентов React Native путем смешивания снимков и поверхностного рендеринга.

Инструменты

Я перепробовал множество инструментов и, наконец, нашел комбинацию, которая мне достаточно нравится, чтобы предложить вам:

  • Jest, фреймворк для тестирования от Facebook;
  • Enzyme, утилита для тестирования React;
  • Энзим-в-json для преобразования энзимных оболочек для сопоставления снимков Jest.

Тестирование визуализации основных компонентов

Сравнение рендеринга

Представляем Enzyme API:

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

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
// ...

Единственный способ проверить полный жизненный цикл - componentDidMount и componentDidUpdate. Полный рендеринг, включая дочерние компоненты. Требуется DOM (jsdom, domino). Более стабильно по времени исполнения.

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);
// ...

Вызывает только рендеринг, но рендерит всех потомков.

import { render } from 'enzyme';

const wrapper = render(<MyComponent />);
// ...

Итак, я рекомендую вам несколько правил:

  • Всегда начинайте с мелкого
  • Если нужно протестировать componentDidMount или componentDidUpdate, используйте mount
  • Если вы хотите протестировать жизненный цикл компонента и поведение детей, используйте mount
  • Если вы хотите протестировать рендеринг дочерних элементов с меньшими накладными расходами, чем при монтировании, и вас не интересуют методы жизненного цикла, используйте рендеринг.

Пример использования поверхностного рендеринга для тестирования компонента рендеринга.

Резюме сравнения рендеринга:

Плюсы

  • Мощный API-интерфейс селектора (поиск, содержит и т. Д.)
  • На самом деле он работает в React Native (мелкая часть)

Минусы

  • Большую картинку (полную визуализацию) создать сложно.
  • Сложно писать и поддерживать.

Тестирование снимков.

Моментальное тестирование - это способ подтвердить результат данного теста путем создания Json-представления его вывода.

Как работает тестирование снимков? При первом запуске теста Json-представление ожидаемого результата сохраняется в файл. В следующий раз, когда вы запустите тот же тест, будет выполнено различие между новым и ранее сохраненным снимком. Если нет различий, тест проходит, в противном случае тест не выполняется и возвращается результат сравнения.

Создать снимок можно двумя способами:

  • Использовать реакцию-тест-рендеринг

  • Используйте Enzyme (неглубокий метод) + Enzyme-to-JSON. (Смешайте неглубокий рендеринг и снимок). Вы можете проверить ниже в части Тестирование компонента React, подключенного к Redux store.

Тестирование рендеринга при изменении свойств или состояния.

Мы также можем легко протестировать состояние или свойства нашего компонента. Обновите компонент, инициировав состояние и свойства в конструкторе и развернув событие щелчка с помощью функций setState () и setProps ().

Установите реквизит перед тестированием

Затем снимок с исходными реквизитами.

Итак, как видите, начальное название реквизита - «ABC». Я собираюсь изменить это название на "Google".

И, наконец, снимок:

Да, с помощью снимка мы можем очень легко проверить, что что-то изменилось.

Сводка снимков

Плюсы

  • Легко писать
  • Легко проверить изменения и обновить снимок.

Минусы

  • Отсутствует API-интерфейс селектора, например Enzyme
  • Снимки могут быть огромными, и иногда поиск нужной детали может быть медленным.

Тестирование функции ввода дескриптора в компоненте.

С помощью функции ввода дескриптора тестирования наша цель - определить, когда пользователь взаимодействует с нашим приложением, вызываются соответствующие функции.

Мы собираемся создать тестовый пример, чтобы проверить, вызывается ли событие onPress для TouchableOpacity. Наши события щелчка запускают props onLeftButtonClicked, и мы можем легко смоделировать эту функциональность в Jest, используя jest.fn ().

После поверхностного рендеринга нашего компонента мы имитируем событие onPress () и проверяем, вызывается ли свойство onLeftButtonClicked. С событием onPress используйте моделирование вызова напрямую с помощью props (). OnPress (), но в других случаях мы должны использовать simulate () для смоделировать событие.

Тестирование компонента React, подключенного к Redux store.

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

Итак, прежде чем мы начнем писать код тестирования, нам понадобится оболочка Redux для всех наших компонентов тестирования, чтобы обеспечить хранилище Redux. К счастью, Enzyme предоставляет функцию поверхностного рендеринга, которая может принимать контекст в качестве второго параметра, куда мы можем поместить хранилище Redux для наших тестов.

Чтобы поместить их в фиктивное хранилище, которое может использовать наш тест, мы сначала создаем наш объект testState. Затем передайте этот объект в функцию mockStore () из redux-mock-store. Затем мы передаем имитируемое хранилище нашему подключенному компоненту, добавляя второй аргумент к функции shallow в shallowWithStore.

Наконец, для рендеринга снимка нашего подключенного компонента мы используем connectComponent.dive() для доступа к фактическому результату рендеринга нашего компонента для снимка (в противном случае оболочка будет представлять функцию подключения):

Финал

Резюме

Надеюсь, этот пост поможет вам написать собственные тесты компонентов React. Обобщить:

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

Удачного тестирования!