Тази публикация обяснява как можете бързо да настроите вашето React TDD приложение с Jest и Enzyme.

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

- Какво е разработка, управлявана от тестове (TDD)?

- Защо трябва да правя разработка, управлявана от тестове (TDD)?

- Какви инструменти имаме за TDD и кой е най-добрият за React Project?

Какво е разработка, управлявана от тестове (TDD)?

Разработката, управлявана от тестове (TDD) е процес на разработка на софтуер, който разчита на повторението на много кратък цикъл на разработка: изискванията се превръщат в много специфични тестови случаи, след което софтуерът се подобрява, така че тестовете да преминат. Уикипедия

Видове тестове

- Тестване на единици: При тестване на единици ние тестваме, за да сме сигурни, че даден компонент произвежда очакван изход, когато му бъде даден вход.

- Интегрирано тестване: Тук отделните тестови единици се комбинират и тестват като група в даден момент.

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

- Тестване на използваемостта: Тук тестваме продукта от гледна точка на клиентите, колко лесно е да се използва продуктът.

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

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

Защо трябва да правя разработка, управлявана от тестове (TDD)?

TDD помага за намаляване на количеството грешки, които разработчиците изпращат в производството. Тъй като първо пишете своя тест, след това пишете кода си, за да преминете теста си, преди да се уверите, че вашият код се държи според очакванията, лесно е да откриете грешен код въз основа на очакваното поведение.

Какви инструменти имаме за TDD и кой е най-добрият за React Project?

Инструменти за тестване на JavaScript

1. Шега

2. Ензим

3. Жасмин

4. МОКА

Избрах да използвам Jest и Enzyme за моите React приложения, защото те са лесни за интегриране и React поддържат Jest веднага.

Какво прави теста добър

1. Всеки тест трябва да е независим от останалите

2. Всяко поведение трябва да бъде определено само в един тест

3. Без излишни твърдения. Което означава да не тествате това, което не трябва да тествате

4. Тествайте само една кодова единица наведнъж

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

Сега знаем Какво и Защо относно разработката, управлявана от тестове (TDD), така че нека направим Как

Забележка: За да улесня нещата, ще използвам create-react-app за моя проект и yarn за инсталиране на пакети. Предположих, че сте инсталирали create-react-app на вашия компютър, ако не инсталирате create-react-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 в папката tests и оставете съдържанието да изглежда така

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 и да инсталирате отново, ако получите грешки, след като изпълните стъпките.

Следващото в тази поредица е Удостоверяване(Вход, Регистрация, Забравена парола и Повторно задаване на парола), моля, следете.

Благодаря за четенето.