Разработка через тестирование (TDD) в React Часть 1

В этом посте объясняется, как быстро настроить приложение React TDD с помощью Jest и Enzyme.

Прежде чем мы углубимся в реальную сделку, важно знать

- Что такое разработка через тестирование (TDD)?

- Почему я должен заниматься разработкой через тестирование (TDD)?

- Какие инструменты у нас есть для TDD и какие лучше всего подходят для проекта React?

Что такое разработка через тестирование (TDD)?

Разработка через тестирование (TDD) - это процесс разработки программного обеспечения, основанный на повторении очень короткого цикла разработки: требования превращаются в очень конкретные тестовые примеры, затем программное обеспечение улучшается, чтобы тесты проходили. Википедия

Типы тестирования

- Модульное тестирование: при модульном тестировании мы проверяем, дает ли компонент ожидаемый результат при вводе.

- Интеграционное тестирование: здесь отдельные тестовые единицы объединяются и тестируются как группа в определенный момент времени.

- Тестирование производительности: при тестировании производительности мы проверяем скорость системы.

- Тестирование юзабилити: здесь мы тестируем продукт с точки зрения клиентов, насколько легко использовать продукт.

- Приемочные испытания: Приемочные испытания используются для проверки того, соответствует ли продукт требованиям заказчика.

- Регрессионное тестирование: регрессионное тестирование, чтобы убедиться, что модификация работает правильно или некоторые функции нарушены в результате модификаций.

Почему я должен заниматься разработкой через тестирование (TDD)?

TDD помогает сократить количество ошибок, которые разработчики отправляют в рабочую среду. Поскольку вы сначала пишете свой тест, а затем пишете свой код, чтобы пройти тест, прежде чем убедиться, что ваш код ведет себя так, как ожидалось, легко обнаружить ошибочный код на основе ожидаемого поведения.

Какие инструменты у нас есть для TDD и какие лучше всего подходят для проекта React?

Инструменты тестирования JavaScript

1. Шутка

2. Фермент

3. Жасмин

4. MOCHA

Я выбрал Jest и Enzyme для своих приложений React, потому что их легко интегрировать, а React поддерживает Jest из коробки.

Что делает тест хорошим

1. Каждый тест должен быть независимым от других.

2. Любое поведение следует указывать только в одном тесте.

3. Никаких лишних утверждений. То есть не проверять то, что вам не нужно проверять

4. Проверяйте только одну кодовую единицу за раз.

5. Избегайте ненужных предварительных условий.

Теперь мы знаем Что и Почему о разработке через тестирование (TDD), поэтому давайте рассмотрим Как

Примечание. Чтобы упростить задачу, я буду использовать приложение create-react-app для своего проекта и yarn для установки пакетов. Я предполагал, что на вашем компьютере установлено приложение create-response-app, если вы не устанавливаете приложение create-response-app перед любыми другими вещами.

npm install -g create-react-app

Шаг 1:

create-react-app tdd-setup

Шаг 2: (Установите необходимые зависимости)

yarn add enzyme enzyme-adapter-react-16 enzyme-to-json

Or

npm install enzyme enzyme-adapter-react-16 enzyme-to-json

Шаг 3

Добавьте в список зависимостей в файле package.json.

"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0"

Тогда беги

npm install or yarn install

Шаг 4

Создайте файл jest.config.json в корневом каталоге, и его содержимое должно выглядеть следующим образом

{
  "setupFiles": [
  "raf/polyfill",
  "<rootDir>/tests/setup.js"
  ],
  "snapshotSerializers": [
     "enzyme-to-json/serializer"
  ],
 "collectCoverage": true
}

Шаг 5

Создайте файл .babelrc в корневой папке, и его содержимое должно выглядеть следующим образом

{
  "presets": [
     "@babel/env",
     "@babel/react"
  ],
  "plugins": [
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-proposal-object-rest-spread"
  ]
}

ШАГ 6

Создайте в корневом каталоге папку под названием tests и добавьте setup.js (tests / setup.js), при этом содержимое setup.js должно выгляди так

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });

Шаг 7.

В файле package.json замените

"test": "react-scripts test"

с участием

"test": "jest --config=jest.config.json --watch"

Шаг 8

Создайте файл hello.test.js внутри папки тестов и пусть его содержимое будет выглядеть так

import React from 'react';
const greetme = "Hello!";
describe("Our first test!", () => {
   it("Should say hello!", () => {
      expect(greetme).toBe("Hello!");
   });
});

Шаг 9

Теперь мы можем запустить наш первый тест

yarn test

or

npm test

Если бы все было одинаково, мы бы увидели это в нашем терминале.

Мы подошли к концу этой части.

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

Следующим в этой серии является Аутентификация (вход, регистрация, восстановление пароля и сброс пароля), следите за обновлениями.

Спасибо за прочтение.