Apache Superset: Тестирование и преобразование Enzyme в RTL

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 с расширенной функциональностью для наших конкретных нужд.

Оцените статью
Procodings.ru
Добавить комментарий