Superset использует Jest и React Testing Library (RTL) для написания модульных и интеграционных тестов. В прошлом мы использовали Enzyme, но теперь, когда мы преобразуем все наши компоненты классов в функциональные компоненты, Enzyme не может поддерживать наши потребности в тестировании. Поскольку RTL лучше подходит для тестирования функциональных компонентов, мы переводим все наши тестовые файлы на RTL. Это может быть довольно сложным процессом — я прошел через многое в этом процессе, поэтому хочу поделиться тем, что я узнал на данный момент.
Первое и самое главное: у нас есть документ «Руководство по тестированию и лучшие практики», в котором описаны все стили кода, которых мы придерживаемся в наших тестах. Пожалуйста, используйте этот документ в качестве справочника при написании тестов.
Главное, что вы должны иметь в виду, это разный подход к тестированию, который использует каждая библиотека тестирования:
- Enzyme — это тестирование, сфокусированное на коде. Она тестирует то, что находится в «глубине» кода, и чего пользователь никогда не увидит, например, реквизиты компонента.
- RTL — это тестирование, ориентированное на пользователя. Все ваши тесты будут полагаться на то, что пользователь может видеть и делать.
- Например: Если бы был тест Enzyme, проверяющий реквизиты компонента, вы бы искали, где эти реквизиты визуально отображаются на компоненте, и захватили бы их с помощью RTL.
- За исключением некоторых вещей, таких как API mocking, Superset использует fetch-mock для этого. Вот ссылка на документацию, если вы хотите узнать больше о том, как имитировать вызовы API в RTL. Вы также можете поискать другие уже существующие экземпляры fetch-mock в кодовой базе, чтобы увидеть, как он используется в Superset.
Тестовая среда Superset с каждым днем становится все более здоровой и удобной для работы, и я надеюсь, что это вдохновит вас внести свой вклад в это дело! В заключение я хотел бы оставить вам несколько хороших ресурсов по RTL/тестированию:
- В своих тестах используйте эти команды для помощи в отладке:
-
- Это покажет вам отрисованный компонент в консоли, когда вы запустите тест. Вы можете передать захваченный элемент, если хотите увидеть только этот элемент, а не весь отрисованный компонент.
-
- Это даст вам ссылку в консоли при запуске теста. Щелкните по этой ссылке, и откроется экземпляр тестовой площадки, отображающий в браузере ваш отрисованный компонент (или захваченный элемент, переданный в функцию). Посмотрите по этой ссылке пример того, как это выглядит, это действительно классная функция 😁 В коде это будет выглядеть следующим образом:
-
const button = screen.getByRole('button');
screen.debug(button);
screen.logTestingPlaygroundURL(button);
- Я преобразовал 11 файлов в этом запросе, не стесняйтесь использовать его в качестве справочника для преобразований.
- В документации RTL есть хорошее руководство по конвертации из Enzyme
- RTL cheatsheet
- Матчики Jest
- jest-dom matchers
- Superset имеет очень удобный файл-помощник для RTL с расширенной функциональностью для наших конкретных нужд.