Если вы хотите знать, как проверить реагирование, вы находитесь в нужном месте. Вы действительно знаете, что ваш код делает то, что он должен делать? Вы испытали это в браузере? Что делать, если у вас нет, или вы не можете проверить все, и он разрывается в производстве?
Библиотека тестирования - это группа коммунальных услуг разработчиков, используемых для записи индивидуальных тестов на компоненты приложений. Некоторые из основных частей теста:
Описание:
описывает, о чем тест
Использование / визуализация:
использует компонент в среде, где он может быть проверен
Издеваться:
создает притворяться функциями, чтобы вы могли проверить свои предположения
В течение этой статьи я собираюсь исследовать некоторые примеры из библиотеки тестирования RACT, чтобы помочь вам начать с этим ценным способом улучшения устойчивости вашего вывода кода, а также обеспечения вашего кода не бросается на любые неприятные сюрпризы, как только это входит в производство.
Хотите более полезные ресурсы? Вот иссадка лучших
Инструменты веб-дизайна
вокруг, которые помогут вам работать умнее. Или если вам нужна новая машина, попробуйте эту среду
Лучшие ноутбуки для программирования
Отказ Или если вы строите новый сайт, вам может понадобиться отличный
Строитель сайта
Отказ
01. Начните с библиотеки тестирования RACT
Я собираюсь использовать Create-React-App для этой демонстрации для этого, потому что он уже приходит предварительно обработанный с библиотекой тестирования. Если вы используете GATSBY или настраиваемую настройку, может возникнуть некоторая конфигурация, которую вам необходимо пройти, прежде чем начать использовать библиотеку тестирования.
Для начала давайте создадим новое приложение. Если у вас уже есть недавняя версия Node.js, вы можете запустить следующую команду без установки ничего другого глобально:
npx create-react-app netmag-javascript-testing
02. Решите, что тестировать
Представьте, что у нас есть простой компонент, скажи кнопку с каким-то состоянием. Каковы некоторые из вещей, которые нужно тестировать в таком компоненте?
●
Появление компонента:
Мы не хотим ничего изменить неожиданно после того, как мы написали наш компонент. Таким образом, мы собираемся написать тест на снимки для захвата того, как он оказывает. Затем, если что-то изменится, мы увидим это быстро без ручного или визуального теста. Это отлично подходит для компонентов, состоящих из многих небольших компонентов: вы можете быстро увидеть, когда (и где) его появление было затронуто.
●
Различные ветви, которые представляют:
Поскольку мы могли бы иметь два или более разных выхода, нам нужно проверить, что он делает все их правильно, а не только один из них. Таким образом, нам нужно имитировать событие Click и иметь еще один тест на снижение моментальных снимков для того, как он отображается после того, как эта ветвь кода была запущена.
●
Что функции называются, как ожидалось:
Мы хотим убедиться, что код, который мы написали, чтобы позвонить другую функцию, как мы предполагаем, что это будет. Но поскольку эта функция является внешней зависимостью, мы не хотим проверять это здесь. Наши тесты должны инкапсулировать только функциональность, которые мы хотим их.
Давайте напишем наш первый тест. Создайте новый файл под названием
Mycomponent.unit.test.js.
в той же папке, что и компонент. Добавляя Test.js в конце, он будет автоматически выбран библиотекой тестирования. Содержимое этого файла ниже:
Импорт реагирует с «реагирования»
Импорт {Render} из '@ Тестирование-библиотека / Реагирование
Импортировать MyComponent от «/ MyComponent»
Опишите ('mycomponent / & gt;', () = & gt; {
// тесты идут сюда
})
Первое, что я хочу обратить ваше внимание, это
описывать()
Функция, которая принимает два аргумента: первая - это строка, которую вы можете использовать для лучшего описания - как строку текста - какой ваш тест будет делать. В нашем случае мы просто сказали, что он должен оказывать. Это очень полезно, когда кто-то другой смотрит на ваш код, или вы должны вспомнить, что вы сделали на более позднем этапе. Запись хороших описаний заявления - это форма документации кода и еще одна веская причина для написания тестов.
Второй аргумент - это ваши тесты. То
описывать()
Функция запускает все эти тесты один за другим.
04. Используйте функцию очистки
Давайте введем функцию помощника под названием
Foreeafee ()
Отказ Нам нужно использовать это, потому что каждый раз, когда мы делаем что-то с компонентом, мы хотим, чтобы свежая копия без реквизитов, которые мы ранее передали ему, все еще существуют в компоненте. Или нам может потребоваться восстановить компонент:
Foreeafee ()
Это для нас, и мы можем пройти его функцию очистки.
На этом этапе мы собираемся «гореть» нашего компонента (или сделать его).
Опишите («компонент должен рендер», () = & gt; {
Rebedeach (очистка)
Это ('оказывает основные реквизиты, () = & gt; {
рендер (& lt; mycomponent / & gt;)
})
}
Этот рендер дает нам доступ ко всем представленным свойствам скомпилированного компонента. Это может быть хорошо, чтобы бросить это в
console.log ()
Таким образом, вы можете видеть более четко, что это делает.
Если вы сделаете, вы увидите, что есть несколько полезных свойств, которые мы можем воспользоваться здесь. Я собираюсь сделать утверждение (сделать тестируемую декларацию) и проверить его, извлекая контейнер. Контейнер «содержит» узлы DOM (все HTML), связанные с компонентом.
Теперь у нас есть доступ к контейнеру, как мне сказать, что он оказывается в соответствии с моим утверждением? Добавив тест на снижение.
Подумайте о снимок как на фотографию. Требуется снимок нашего компонента в определенный момент времени. Затем всякий раз, когда мы делаем изменения в коде, мы можем увидеть, что он по-прежнему соответствует оригинальному снижению. Если это так, мы можем быть уверены, что ничто не изменилось в компоненте. Однако, если это не так, мы могли бы раскрыть проблему, возникшую в другой компонент, тот, который мы могли бы не заметить ранее:
06. Тестовые свойства
Опоры или свойства компонента также могут быть проверены с помощью снимков. Тестирование различных реквизитов, которые вы предоставляете вашему компоненту, даст вам большее покрытие и уверенность. Вы никогда не знаете, когда требование будет означать реквизиты вашего компонента, будут изменяться, и окончательный выход изменится.
Добавьте следующий объект в верхнюю часть вашего файла:
Мы определяем свойства в объекте, а затем используем оператор по распространению (три точки, а затем имя объекта:
... lightproperties)
Потому что мы можем пройти только один аргумент, когда мы видим таким образом. Также полезно посмотреть, какие свойства вы проходите в изоляцию:
Представьте себе наш компонент имеет кнопку, и вы хотите убедиться, что что-то происходит, когда кнопка нажала. Вы можете подумать, что вы хотите проверить состояние приложения; Например, вы можете быть соблазнены проверить, что государство обновлено. Однако это не объект этих испытаний.
Это вводит нас в важной концепции в использовании библиотеки тестирования: мы здесь не тестируйте состояние или способ нашего компонента. Мы здесь, чтобы проверить, как люди собираются использовать компонент и что это соответствует их ожиданиям.
Так, обновлено ли государство нематериальное; То, что мы хотим проверить, это то, что является результатом этой кнопки нажатия.
Давайте представим, что мы проверяем результат функции, которая изменяет UI из темного режима в режим освещения. Вот компонент:
Вы заметили, что добавили новый атрибут
data-testid
к кнопке? Вот как вы можете проверить это. Во-первых, импортировать новую функцию, FireeVent из библиотеки тестирования:
Импорт {очистка,
FireeVent,
оказывать
} От «@ Тестирование-Библиотека / Реагирование»
Мы можем использовать эту функцию для тестирования, существуют изменения в пользовательском интерфейсе, и что эти изменения являются последовательными:
Это здорово: нам не нужно вручную зайти на сайт и оглянуться, затем нажмите кнопку и посмотреть во второй раз - во время которого вы можете признать, вы, вероятно, забуду или пропустите что-нибудь! Теперь мы можем уверены, что, учитывая тот же вход, мы можем ожидать того же вывода в нашем компоненте.
Когда дело доходит до проверок идентификаторов, я лично не люблю использовать
data-testid
найти что-то в доме. В конце концов, объект тестов - подражать тому, что делает пользователь и проверить, что происходит, когда они делают.
data-testid
Похоже, что немного обманывает - хотя данные-позабония, вероятно, пригодятся для вашего инженера QA (см. Боксу, роль инженеров обеспечения качества).
Вместо этого мы могли бы использовать
getbytext ()
и пройти в тексте нашей кнопки. Этот метод будет намного больше поведения, специфично.
08. Макет и шпионить функцию
Иногда нам может потребоваться проверить вызов функции, но эта функция находится за пределами объема теста. Например, у меня есть отдельный модуль, который содержит функцию, которая вычисляет значение PI к определенному количеству десятичных средств.
Мне не нужно проверить, что является результатом этого модуля. Мне нужно проверить, что моя функция делает как ожидалось. Для получения дополнительной информации о том, почему это, пожалуйста, смотрите флажок Блок и тесты интеграции. В этом случае мы могли бы «сделать» эту функцию:
Функция
tohavebeencallEdtimes ()
является одним из многих функций помощника в библиотеке тестирования, которые позволяют нам
Чтобы проверить вывод функций. Это позволяет нам не только масштабировать наши тесты только для модуля, который мы хотим проверить, но и означает, что мы можем «шпионить» или увидеть, что делает наша функция, когда она вызывает эту функцию.
Письменные тесты могут казаться небольшим пустяком, чтобы начать. Я надеюсь, что этот учебник дал вам немного больше уверенности, чтобы попробовать его. Поскольку я начал писать тесты для моих приложений, я действительно не могу вернуться: я могу легче отдохнуть, зная, что я ухожу за гораздо лучшее наследие для тех, кто будет использовать свою работу в будущем.
Помните, если вы строите сложный сайт, вы захотите получить
веб хостинг
Сервисное место на. И если этот сайт может содержать множество активов, хранение их в надежном
облачное хранилище
это важно.
Этот контент изначально появился в
Чистый журнал
Отказ Подробнее о наших
Веб-дизайн Статьи здесь
Отказ
Прочитайте больше:
HTML6: Что это и когда он прибывает?
Написать HTML-код быстрее
Дизайн мобильного приложения: руководство для начинающих
