Тестирование имеет решающее значение для поддержки любого приложения!

Здравствуйте, дорогие читатели,

Я вернулся с горячей статьей о тестировании ヾ(⌐■_■)ノ♪

Тестирование является важнейшей опорой, когда дело доходит до создания приложения. Знание того, как кодировать, важно, и знание того, как эффективно тестировать то, что вы закодировали, имеет решающее значение. Вам интересно, почему? В настоящее время информатика используется практически во всех областях. Для создания приложения требуется много команд и сотрудничество, много этапов (этап разработки, интеграция, производство и т. д.), много ресурсов. Таким образом много денег. Сегодня, если вы ищете пост разработчика, вы заметите, что они также будут спрашивать вас о ваших инструментах и ​​​​навыках тестирования.

Тестирование — это единственный способ убедиться, что мы не сломаем то, что создали до сих пор, и, в то же время, единственный способ убедиться, что все приложение достаточно сильное, чтобы его можно было распространить по всему миру. реальные пользователи.

Хватит блаблы, давайте приступим к следующему плану:

  • Что такое шутка?
  • Пример шутливого теста
  • Как написать тестовый снимок Jest?
  • Еда на вынос

Что такое шутка?

Возможно, вы уже слышали о Jest, который занимает все больше и больше места на рынке, заменяя Karma. Jest изначально создавался Facebook для тестирования компонентов React. Инструмент в основном представляет собой средство запуска тестов, и его плюс в том, что он намного эффективнее, чем Karma. Теперь даже некоторые приложения Angular перешли на Jest.

Хотите знать разницу между кармой и шуткой ◉_◉?

Я использовал их обоих. Мне нравится Karma, потому что она связана с браузером, и мы можем запустить определенный тест и увидеть читаемые и видимые результаты в браузере. Это также его предел, потому что он обязательно должен использовать экземпляр браузера. В то время как Jest независим, ему не нужен браузер. Поэтому, если вы привыкли к Карме, вы будете разочарованы. Вам нужно будет прочитать результат в командной строке. Это не все. Jest может запускать тесты параллельно, указав, сколько потоков вы хотите использовать при запуске средства запуска тестов. Это то, что делает Jest таким популярным, поскольку мы видим НАСТОЯЩУЮ РАЗНИЦУ с точки зрения времени, которое требуется. Конечно, идеального решения не существует. С Jest вы не можете сразу запустить конкретный тест. Поскольку Jest не знает, как это сделать, он пропустит все другие тесты, пока не дойдет до конкретного теста, который вы хотите запустить. Это так утомительно и отнимает много времени при отладке теста на этапе разработки.

То, как Karama запускает тесты, эффективно для разработчика при кодировании приложения, но требует больше времени, что не очень хорошо, особенно если у вас корпоративное или большое приложение. В этом случае Jest будет более эффективным.

Пример шутливого теста

Если вы уже знаете о Jest и использовали его, вы можете пропустить этот раздел и перейти к снимку (¬‿¬). Если вы впервые открываете для себя Jest, хорошая новость для вас заключается в том, что это почти такой же способ написания теста с describe и it. Разница зависит от того, как мы запускаем тесты и отлаживаем их. Вот пример, который, кстати, можно применить и для приложения Angular.

Вот простой компонент статей, который отображает список статей:

Тест статей:

Мы можем протестировать все, что захотим, в разделе it. Теперь давайте перейдем к тесту снимков.

Как написать Jest snapshot Test?

Прежде чем ответить на вопрос как, нам нужно сначала узнать о что, верно?

Итак, что такое моментальный тест Jest?

Снимок — это, по сути, дерево компонента в данный момент времени. Когда вы обновляете дерево компонентов, вы также обновляете моментальный снимок, чтобы ваш тест прошел успешно.

Нет, нужен пример?

Вот пример простого Hello World:

№1. Нам нужно установить библиотеку моментальных снимков React:

Для этого я использовал в данном случае библиотеку react-test-renderer. Все, что вам нужно, это установить его с помощью NPM или Yarn.

yarn add --dev react-test-renderer
// Or
npm add --dev react-test-renderer

№2. Импортируйте зависимость библиотеки, чтобы мы могли создать моментальный снимок:

import renderer from 'react-test-renderer';

№3. Создайте снимок

renderer.create(<div>Hello world</div>);

Если мы сохраним эту строку кода, мы увидим много ненужной информации о нашем дереве элементов. Вот почему мы будем использовать функцию toJSON(), чтобы видеть только важную информацию. Вот результат нашего примера выше:

const element= renderer.create(<div>Hello world</div>).toJSON();
console.log(element);
// ==> printed result
{type: 'div', props:{}, children:['Hello world']}

№4. Проверьте снимок

expect(element).toMatchSnapshot();

Теперь давайте создадим снимок для нашего ArticlesTest:

Если мы напечатаем articlesTree, увидим следующий результат:

{ 
  type: 'div',
  props: {},
  children: [
     {type: 'div', props: [Object], children: [Object]},
     {type: 'div', props: [Object], children: [Object]},
     {type: 'div', props: [Object], children: [Object]},  ]  
}

Мы также заметим новый сгенерированный файл с именем ArticlesTest.js.snap. Этот файл содержал всю информацию о нашем компоненте, даже детали стиля. Все! Это похоже на ДНК нашего компонента, так что любое изменение приведет к провалу теста.

Что произойдет, если мы изменим или рефакторим наш компонент? Тест будет терпеть неудачу каждый раз, когда мы вносим изменения в компонент, который нам нужен для обновления моментального снимка. Что очень практично, так это то, что Jest покажет разницу между двумя версиями, поэтому наш тест провалился. Jest также спросит вас, нужно ли это; поэтому нам нужно обновить снимок:

Нажав u, мы обновим снимок, и тест снова пройдет.

Вот и все? Неа!

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

Вот как:

expect(articlesTree.children.length).toBe(3)

Так как у нас есть 3 статьи в нашем объекте testProps.

И так далее!

Еда на вынос

  • Снимок похож на древовидное представление компонента. Он отражает его структуру и стиль.
  • Функция toJson() удобна для просмотра важных сведений о дереве компонентов.
  • Вы можете использовать объект моментального снимка json в качестве инструмента для тестирования других вещей.
  • Всякий раз, когда изменяется представление или стиль компонента, вам необходимо обновить снимок, нажав u после запуска соответствующего теста.

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

Надеюсь, вы и ваша семья в безопасности, где бы вы ни находились!

Подождите. Завтра будет лучше!

FAM

Подпишитесь на меня в Medium, Linkedin, Facebook и Twitter, чтобы не пропустить новые статьи.