React — одна из наиболее часто используемых технологий Frontend в последнее время. Библиотека с высокой производительностью, простая в обслуживании и развитии. В последнее время он продолжает свой путь с Next.js, добавляя силы своей мощи.
Такие технологии, как React или Vue, идеально подходят для обеспечения лучшего взаимодействия с пользователем и написания высокопроизводительных приложений.
После написания приложений, конечно, написанный код, страницы, функции или другие мелкие части, которые вы можете придумать, также должны быть протестированы. Независимо от того, насколько мы уверены в написанном нами коде, все равно очень вероятно, что мы столкнемся с ошибками. Очень важно предотвратить эти ошибки и протестировать приложение перед его запуском.
В проектах, где работает более одного человека, хорошей мерой безопасности будет повторное написание тестов, чтобы не сломать код, написанный кем-то другим. Кроме того, мы можем предотвратить эту проблему, написав наши тесты заранее, чтобы у пользователей не было плохого опыта из-за ошибок, которые могут возникнуть.
Существует множество инструментов тестирования, но их не было бы без библиотек тестирования, облегчающих написание тестов для React. Для React это, конечно же, библиотека тестирования React.
Как использовать?
Если у вас есть приложение, созданное с помощью create react app, вам не нужно загружать тестовую библиотеку. Он будет предустановлен в вашем приложении. Вы можете использовать следующую команду, чтобы установить его другим способом.
После установки тестового пакета мы можем приступить к написанию тестов. Набор тестов предоставляет нам множество полезных инструментов и позволяет моделировать все, что могут делать пользователи.
Например, нажатие кнопки, прокрутка, ввод ввода или выбор чего-либо. Давайте рассмотрим простой пример ниже.
Вверху мы делаем необходимые импорты и извлекаем функции, которые хотим использовать, из нашей библиотеки. визуализация, экран, пользовательское событие. Так чем же они хороши?
рендеринг отображает страницы, которые мы хотим отобразить для нас, и делает элементы DOM доступными.
экран. Используется для выбора или выполнения операций с элементами на экране.
userEvent. Используется для имитации действий, которые может предпринять пользователь. Например, щелкните действие или выберите действие.
Когда мы начинаем писать тест, мы начинаем с ввода ключевого слова «тест» или «это». Нашим первым параметром должен быть текст, описывающий, что будет делать тест.
Затем мы используем рендеринг для рендеринга страницы, над которой мы хотим работать. Это позволит нам находить элементы DOM и манипулировать ими.
Свойство screen позволило нам получить доступ к элементам DOM на экране. С помощью screen.getByText(‘Загрузить приветствие’) мы получаем элемент с именем Загрузить приветствие. Теперь, когда мы добрались до этого элемента, мы можем действовать с ним как с пользователем. Например, мы можем нажать на этот элемент. В нашем примере это уже сделано.
С помощью userEvent мы дадим пользователю возможность выполнить действие, которое он может предпринять. Мы нажимаем «Загрузить приветствие», это элемент, который мы захватили.
Так как процесс, который будет происходить в результате этого клика, займет определенное время (загрузка), нам нужно дождаться результата, который вернется отсюда. Для этого мы используем асинхронную функцию. Когда процесс клика и загрузки завершится, наш экран тоже изменится, появятся новые элементы и изменится содержимое страницы. Так как нам придется подождать, пока в этой части создадутся новые элементы экрана, на формирование этих частей уйдет какое-то время. Переход к следующему шагу теста до того, как эти элементы будут сформированы в дереве DOM, может привести к ошибкам. Таким образом, вводя ключевое слово await в этих частях, мы сообщаем процессу о завершении здесь, а затем другому процессу.
После завершения процесса создания экрана мы выбираем элемент, чья роль является заголовком на экране, с помощью getByRole.
До сих пор мы выполняли операции на экране как пользователь и меняли содержимое страницы. Теперь мы можем проверить результат, которого мы хотим достичь, завершив наш тест.
Ключевое слово expect — это структура, которая дает нам контроль над выводом, который мы хотим получить в результате теста. Здесь мы пишем условие и проверяем вывод.
В нашем примере текст внутри элемента, роль которого — «заголовок», — «привет». Если результат теста соответствует этому, тест считается успешным. Если тест не соответствует этому условию, то наш тест провалится.
Другая структура, которую мы проверяем, — это проверка деактивации кнопки «Загрузить приветствие», на которую мы нажали сначала. Причина, по которой мы это делаем; Чтобы предотвратить повторное нажатие кнопки, если она возвращает результат, который мы хотим, когда вы нажимаете кнопку один раз. Мы завершаем это, проверяя, что элемент, чья роль «кнопка», отключен.
Надеюсь, у вас есть безопасные тестовые написанные приложения. 🧐 😃
