Как да тествате Next.js приложения с помощта на Jest

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

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

Тестване на Next.js приложения

Писането на тестове е основен и често подценяван аспект от разработването на надеждни приложения. Лесно е да изпаднете в изкушението да изпратите кода директно до производството, разчитайки на убеждението, че „вие сте автор на кода, така че той трябва да работи!“

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

Какво е Jest?

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

В идеалния случай тези функции са полезни за постигане на цялостно тестово покритие и гарантиране на надеждността на вашето приложение в различни видове тестове.

Създайте приложение за задачи Next.js

Сега нека се задълбочим в процеса на изпълнение на модулни тестове на приложение Next.js с помощта на Jest. Въпреки това, преди да започнете, създайте проект Next.js и инсталирайте необходимите зависимости.

За да започнете, изпълнете следните стъпки:

1. Създайте нов проект Next.js, като изпълните следната команда във вашия терминал:

   npx create-next-app@последен тест-урок

2. След като създадете проекта, отидете в директорията на проекта, като изпълните:

   cd nextjs-тест-урок

3. Инсталирайте необходимите зависимости като devDependencies като изпълните следната команда:

   npm инсталирайте npm инсталирайте --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

С настроения проект и инсталираните зависимости вече сте готови да изградите приложението Next.js и да пишете тестове на единици с помощта на Jest.

Създайте компонента To-Do

В /src директория на проекта, отворете страници/index.js файл, изтрийте съществуващия шаблонен код Next.js и добавете следния код.

Първо, направете следните импортирания и дефинирайте две функции, които ще управляват задачите на потребителя: addTodo функция и deleteTodo функция.

импортиране {useState} от"реагира";
импортиране стилове от"../styles/Home.module.css";
износпо подразбиранефункцияУ дома() {
конст [todos, setTodos] = useState([]);
конст [newTodo, setNewTodo] = useState("");
конст addTodo = () => {
ако (newTodo.trim() !== "") {
конст updatedTodos = [...todos, newTodo];
 setTodos (актуализираниTodos);
 setNewTodo("");
 }
 };
конст deleteTodo = (индекс) => {
конст актуализиранTodos = [...todos];
 updatedTodos.splice (индекс, 1);
 setTodos (актуализираниTodos);
 };

Кодът използва useState кука за инициализиране и актуализиране на променливите на състоянието: todos и newTodo. The addTodo добавя нова задача към списъка със задачи, когато въведената стойност не е празна, докато deleteTodo премахва конкретна задача от списъка въз основа на нейния индекс.

Сега напишете кода за JSX елементите, изобразени в DOM на браузъра.

връщане (


 тип="текст"
 className={styles.input}
 стойност={нова задача}
 data-testid="въвеждане на задачи"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"добавяне на задачи">
 Добавете Todo
 </button>
"списък със задачи">
 {todos.map((todo, индекс) => (


 {да направя}
 </li>
 ))}
 </ul>
 {todos.map((todo, индекс) => (


 onClick={() => deleteTodo (индекс)}
 className={styles.button}
 data-testid={`изтриване-задача-${index}`}
 >
 Изтрий
 </button>
 </div>
 ))}
 </div>
 );}

Писане на тестови случаи

Преди да започнете да пишете тестови случаи, е изключително важно да конфигурирате Jest според вашите специфични изисквания за тестване. Това включва създаване и персонализиране на jest.config.js файл, който служи като основа за вашата настройка за тестване.

В основната директория създайте нова jest.config.js файл. След това добавете следния код, за да конфигурирате съответно Jest:

конст nextJest = изискват("следваща/шега");
конст createJestConfig = nextJest({
 реж.: "./",
});
конст customJestConfig = {
 moduleDirectories: ["възлови_модули", "/"],
 тестова среда: "шега-среда-jsdom",
};
модул.exports = createJestConfig (customJestConfig);

Накрая отворете package.json файл и добавете нов скрипт, наречен тест който ще изпълни командата шега --watchAll да стартирате всички тестови случаи и да следите за промени.

След извършване на актуализацията вашите скриптове трябва да изглеждат така:

"скриптове": {
"dev": "следваща разработка",
"строя": "следваща компилация",
"старт": "следващ старт",
"мъхчета": "следващ мъх",
"тест": "шега --watchAll"
 },

С готовите конфигурации продължете с писането и изпълнението на тестове.

Тестване на приложението Next.js To-Do с Jest

В основната директория на проекта създайте нова папка, наречена __тестове__. Jest ще търси тестови файлове в тази папка. В тази папка създайте нов файл, наречен index.test.js.

Първо, направете следните импорти.

импортиране У дома от"../src/pages/index";
импортиране"@testing-library/jest-dom";
импортиране { fireEvent, render, screen, waitFor, act } от"@testing-library/react";

Напишете тест, за да видите дали всички елементи се изобразяват правилно:

описвам(„Приложение Todo“, () => {
 то("изобразява приложението Todo", () => {
 изобразявам (<У дома />);

 очаквайте (screen.getByTestId("въвеждане на задачи")).toBeInTheDocument();
 очаквайте (screen.getByTestId("добавяне на задачи")).toBeInTheDocument();
 });
});

Тестовият случай проверява дали приложението To-Do и неговите елементи се изобразяват правилно. Вътре в тестовия случай, У дома компонентът се изобразява с помощта на изобразявам функция от библиотеката за тестване.

След това се правят твърдения с помощта на очаквам функция, за да гарантира, че специфични елементи с тестови идентификатори, като напр въвеждане на задачи присъстват в изобразения изход. Ако тези елементи са намерени в DOM, тестът преминава; в противен случай се проваля.

Сега изпълнете следната команда, за да изпълните теста.

npm стартирайте тест

Трябва да видите подобен отговор, ако тестът премине.

Тестване на различни действия и симулиране на грешки

Опишете тези тестови случаи, за да проверите функционалността на функциите Add To-Do и Delete To-Do.

Започнете, като напишете тестовия случай за функцията Add To-Do.

 то("добавя задача", асинхронен () => {
 изобразявам (<У дома />);

конст todoInput = screen.getByTestId("въвеждане на задачи");
конст addTodoButton = screen.getByTestId("добавяне на задачи");
конст todoList = screen.getByTestId("списък със задачи");
изчакайте действам(асинхронен () => {
 fireEvent.change (todoInput, { мишена: { стойност: „Нова задача“ } });
 addTodoButton.click();
 });
изчакайте чакам за(() => {
 очаквайте (todoList).toHaveTextContent(„Нова задача“);
 });
 });

Кодовият фрагмент по-горе симулира взаимодействие с потребителя чрез въвеждане в поле за въвеждане и щракване върху бутона за добавяне. След това, използвайки фалшива входна стойност на To-Do, той проверява дали входната стойност е добавена успешно към списъка със задачи.

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

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

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

Накрая напишете тестовия случай за функционалността Изтриване на задачи.

 то("изтрива задача", асинхронен () => {
 изобразявам (<У дома />);

конст todoInput = screen.getByTestId("въвеждане на задачи");
конст addTodoButton = screen.getByTestId("добавяне на задачи");

 fireEvent.change (todoInput, { мишена: { стойност: „Задача 1“ } });
 fireEvent.click (addTodoButton);

конст deleteTodoButton = screen.getByTestId("delete-todo-0");
 fireEvent.click (deleteTodoButton);

конст todoList = screen.getByTestId("списък със задачи");
изчакайте чакам за(() => {
 очаквайте (todoList).toBeEmptyDOMElement();
 });
 });

Отново той проверява дали To-Do е изтрито успешно. Запазете файла, за да изпълните теста.

Единично тестване с помощта на Jest

Това ръководство ви е предоставило знанията за писане и изпълнение на прости модулни тестове, използвайки To-Do компонент като пример. За да осигурите стабилността и надеждността на основните функции на вашето приложение и да намалите шансовете за неочаквани проблеми в производствени среди, важно е да дадете приоритет на тестовете за писане за вашия ключ компоненти.

Освен това можете да подобрите своя подход към тестването чрез включване на моментни тестове и тестове от край до край.