Писането на тестове може да бъде досадно и повтарящо се. Може да почувствате, че губите ценно време, което предпочитате да използвате за работа по функции. Въпреки това, ако искате да изпращате приложения, в които сте уверени, трябва да пишете тестове.

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

Можете лесно да пишете тестове в React с помощта на Jest и React Testing Library.

Какво трябва да тествате в React?

Решаването какво да тествате може да бъде трудно. Въпреки че тестовете са страхотни, не трябва да тествате всеки ред във вашето React приложение. Това ще ви остави с крехки тестове, които се развалят при най-малката промяна в приложението ви.

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

instagram viewer

Освен това се уверете, че тествате най-използваните компоненти във вашето приложение, като целевата страница или компонента за влизане. Освен това тествайте най-важните функции във вашето приложение. Например, това може да са функции, които носят пари, като функцията за пазарска количка.

Когато решавате какво да тествате, едно нещо, което трябва да имате предвид, е никога да не тествате функционалност, с която React се справя сам. Например, вместо да тествате валидността на реквизитите, можете да използвате React PropTypes.

Тестване на компонент на бутон

Не забравяйте, че трябва да тествате само изпълнението на даден компонент от крайния потребител, а не вътрешната му работа. За компонент на бутон това означава да проверите дали се изобразява без срив и се показва правилно.

Създайте нов файл в src наречена папка Button.js и добавете следния код.

функцияБутон({стойност}) {
връщане (
<бутон>{стойност}</button>
 )
}
износпо подразбиране Бутон

Button.js приема проп, наречен стойност, и го използва като стойност на бутона.

Пишете първия си тест

А приложение за създаване-реагиране на приложение идва предварително инсталиран с Jest и React Testing Library. Jest е лека библиотека за тестване с вградени функции за подигравки и твърдения. Работи с много JavaScript рамки. Библиотеката за тестване на React, от друга страна, предоставя функции, които да ви помогнат да тествате как потребителите взаимодействат с компонентите.

Създайте нов файл, наречен Button.test.js в папката src. По подразбиране Jest идентифицира файлове със суфикс с .test.js като тестови файлове и автоматично ги изпълнява. Друг вариант е да добавите вашите тестови файлове в папка, наречена __тестове__.

Добавете следния код в Button.test.js, за да създадете първия тест.

импортиране {изобразяване} от '@testing-library/react';
импортиране Бутон от '../Бутон';
описвам('Компонент бутон', () => { 
 тест('Изобразява компонента на бутона, без да се срива', () => {
 изобразявам (<Бутон />);
 }); 
})

Този тест първо определя какво представлява тестът, използвайки блока за описание, предоставен от Jest. Този блок е полезен за групиране на свързани тестове. Тук групирате тестовете за компонента Button.

Вътре в блока за описание имате първия тест в тестовия блок. Този блок приема низ, описващ какво трябва да направи тестът, и функция за обратно извикване, която изпълнява очакването.

В този пример тестът трябва да визуализира компонента Button без срив. Методът за изобразяване от React Testing Library извършва действителния тест. Той проверява дали компонентът Button се изобразява правилно. Ако го направи, тестът преминава, в противен случай се проваля.

Използване на роли за намиране на бутона

Понякога искате да проверите дали елементът е монтиран. Методът на екрана има функция getByRole(), която можете да използвате, за да вземете елемент от DOM.

screen.getByRole('бутон')

След това можете да използвате елемента, който сте хванали, за да извършите тестове, като проверка дали съществува в документа или е изобразен правилно.

getByRole() е една от многото заявки, които можете да използвате, за да изберете елементи в компонент. Вижте други видове заявки в The Библиотека за тестване на React Ръководство „Коя заявка да използвам“. Също така освен ролята на „бутон“, повечето семантични HTML елементи имат косвени роли, които можете да използвате, за да изпълнявате вашите заявки. Намерете списъка с роли от MDN документи.

Добавете следното към тестовия блок, за да проверите изобразяването на компонента.

тест('Бутон за изобразяване без срив', () => {
 изобразявам (<Стойност на бутона="Регистрирай се" />);
 очаквайте (screen.getByRole('бутон')).toBeInTheDocument()
});

Съпоставителят toBeInTheDocument() проверява дали елементът бутон съществува в документа.

Очаквайте бутонът да се рендира правилно

Компонентът Button приема проп стойност и я показва. За да се рендира правилно, стойността, която показва, трябва да е същата като тази, която сте подали.

Създайте нов тестов блок и добавете следния код.

тест('Изобразява правилно бутона', () => {
 изобразявам (<Стойност на бутона="Влизам" />);
 очаквайте (screen.getByRole('бутон')).toHaveTextContent("Влизам")
})

Обърнете внимание, че не е необходимо да извършвате почистване след тестове, когато използвате React Testing Library. В предишни версии ще трябва ръчно да извършите почистването по следния начин:

afterEach (почистване)

Сега библиотеката за тестване демонтира компонентите автоматично след всяко изобразяване.

Създаване на тестове за моментни снимки

Досега сте тествали поведението на компонента Button. Напишете тестове за моментни снимки, за да проверите дали изходът на компонента остава същият.

Тестовете за моментни снимки сравняват текущия изход със съхранен изход на компонента. Например, ако промените стила на компонент Button, тестът за моментна снимка ще ви уведоми. Можете или да актуализирате моментната снимка, за да съответства на променения компонент, или да отмените промените в стила.

Тестовете за моментни снимки са много полезни, когато искате да сте сигурни, че потребителският ви интерфейс няма да се промени неочаквано.

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

Ще използвате метода за изобразяване от пакета react-test-renderer npm. Така че, изпълнете следния код, за да го инсталирате.

npm Инсталирай реагирам-тест-изобразител

В Button.test.js напишете теста за моментна снимка, както следва:

тест('Съвпада с моментна снимка', () => {
 const дърво = renderer.create(<Стойност на бутона="Влизам" />).toJSON();
очаквам(дърво).toMatchSnapshot();
})

Няма съществуващи моментни снимки за компонента Button, така че изпълнението на този тест ще създаде моментна снимка заедно с тестовия файл:

Бутон
└─── __тестове__
│ │ Бутон.тестове.js
│ └─── __моментна снимка__
│ │ Бутон.тест.js.щракане
│ 
└─── Бутон.js

Сега, когато стартирате следващия тест, React ще сравни новата снимка, която генерира, със съхранената.

Напишете тестове за най-използваните компоненти

Този урок ви научи как да пишете DOM и тестове за моментни снимки в React чрез тестване на компонент Button. Писането на тестове за всички компоненти, които създавате, може да бъде досадно. Тези тестове обаче ви спестяват времето, което бихте похарчили за отстраняване на грешки във вече внедрен код.

Не е необходимо да постигате 100 процента тестово покритие, но се уверете, че пишете тестове за вашите най-използвани и най-важни компоненти.