نحوه تست برنامه های Next.js با استفاده از Jest

مطمئن شوید که برنامه Next.js شما عاری از اشکال است. بیاموزید که چگونه آن را با استفاده از Jest آزمایش کنید.

هدف اولیه هر فرآیند توسعه، ساخت برنامه های کاربردی آماده تولید است. برای رسیدن به این هدف، نوشتن کدی ضروری است که نه تنها الزامات عملکردی را برآورده کند، بلکه در طول زمان پایدار و قابل اعتماد باقی بماند. آزمایش به عنوان یک محافظ عمل می کند و تضمین می کند که برنامه ها همانطور که انتظار می رود حتی با به روز رسانی های جدید در طول توسعه کار می کنند.

در حالی که نوشتن تست‌های جامع که شامل موارد لبه مختلف است ممکن است زمان قابل‌توجهی طول بکشد، به علامت‌گذاری و حل مشکلات قبل از رسیدن به محیط‌های تولید کمک می‌کند.

آزمایش برنامه های Next.js

تست های نوشتن یک جنبه ضروری و اغلب دست کم گرفته شده در توسعه برنامه های کاربردی قوی است. با تکیه بر این باور که “شما کد را نوشته اید، پس باید کار کند!”

با این حال، این رویکرد می تواند منجر به مشکلات و اشکالات پیش بینی نشده در محیط های تولید شود. در نتیجه، اتخاذ یک رویکرد توسعه مبتنی بر تست (TDD) می‌تواند به حداکثر کردن اعتماد شما به کدتان کمک کند و زمان صرف شده برای اشکال‌زدایی و رفع اشکال‌های جزئی را که ممکن است به تولید افت کرده باشند، به حداقل برساند.

جست چیست؟

Jest یک چارچوب تست محبوب است که به طور گسترده توسط فریمورک های مختلف جاوا اسکریپت استفاده می شود. مجموعه‌ای از ویژگی‌های آزمایشی مانند دونده تست قدرتمند، تمسخر خودکار و تست عکس فوری را ارائه می‌کند.

در حالت ایده‌آل، این ویژگی‌ها برای دستیابی به پوشش تست جامع و اطمینان از قابلیت اطمینان برنامه شما در انواع مختلف تست‌ها مفید هستند.

یک برنامه Next.js To-Do ایجاد کنید

اکنون، بیایید به روند اجرای تست های واحد در یک برنامه Next.js با استفاده از Jest بپردازیم. با این حال، قبل از شروع، یک پروژه Next.js ایجاد کنید و وابستگی های مورد نیاز را نصب کنید.

برای شروع، مراحل زیر را دنبال کنید:

1. با اجرای دستور زیر در ترمینال خود یک پروژه Next.js جدید ایجاد کنید: npx create-next-app@latest test-tutorial
2. پس از ایجاد پروژه، با اجرای:cd nextjs-test-tutorial به دایرکتوری پروژه بروید
3. با اجرای دستور زیر وابستگی های لازم را به عنوان devDependencies نصب کنید:npm install npm install –save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

npx create-next-app@latest test-tutorial

cd nextjs-test-tutorial

npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

با راه اندازی پروژه و نصب وابستگی ها، اکنون آماده ساختن برنامه Next.js و نوشتن تست های واحد با استفاده از Jest هستید.

در این قسمت به کد پروژه مراجعه کنید
مخزن GitHub
.

کامپوننت To-Do را ایجاد کنید

در پوشه پروژه /src، فایل pages/index.js را باز کنید، کد Next.js boilerplate موجود را حذف کنید و کد زیر را اضافه کنید.

ابتدا واردهای زیر را انجام دهید و دو تابع را تعریف کنید که To-Dos کاربر را مدیریت می کند: تابع addTodo و تابع deleteTodo.

import { useState } from "react";
import styles from "../styles/Home.module.css";

export default function Home() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  const addTodo = () => {
    if (newTodo.trim() !== "") {
      const updatedTodos = [...todos, newTodo];
      setTodos(updatedTodos);
      setNewTodo("");
    }
  };
  const deleteTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos.splice(index, 1);
    setTodos(updatedTodos);
  };

کد از قلاب useState برای مقداردهی اولیه و به روز رسانی متغیرهای حالت استفاده می کند: todos و newTodo. تابع addTodo زمانی که مقدار ورودی خالی نیست، یک To-Do جدید به لیست کارها اضافه می کند، در حالی که تابع deleteTodo یک کار خاص را بر اساس شاخص خود از لیست حذف می کند.

اکنون، کد عناصر JSX ارائه شده در DOM مرورگر را بنویسید.

return (
    <div className={styles.container}>
      <input
        type="text"
        className={styles.input}
        value={newTodo}
        data-testid="todo-input"
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo} className={styles.button} data-testid="add-todo">
        Add Todo
      </button>
      <ul className={styles.todoList} data-testid="todo-list">
        {todos.map((todo, index) => (
          <li key={index} className={styles.todoItem}>
            {todo}
          </li>
        ))}
      </ul>
      {todos.map((todo, index) => (
        <div key={index}>
          <button
            onClick={() => deleteTodo(index)}
            className={styles.button}
            data-testid={`delete-todo-${index}`}
          >
            Delete
          </button>
        </div>
      ))}
    </div>
  );}

موارد تست نوشتن

قبل از شروع نوشتن موارد تست، بسیار مهم است که Jest را مطابق با الزامات آزمایشی خاص خود پیکربندی کنید. این شامل ایجاد و سفارشی کردن فایل jest.config.js است که به عنوان پایه ای برای تنظیمات آزمایشی شما عمل می کند.

در پوشه اصلی، یک فایل jest.config.js جدید ایجاد کنید. سپس کد زیر را برای پیکربندی Jest بر این اساس اضافه کنید:

const nextJest = require("next/jest");
const createJestConfig = nextJest({
  dir: "./",
});
const customJestConfig = {
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig(customJestConfig);

در نهایت، فایل package.json را باز کنید و یک اسکریپت جدید به نام test اضافه کنید که دستور jest –watchAll را اجرا می کند تا تمام موارد تست را اجرا کند و هر تغییری را مشاهده کند.

پس از انجام به روز رسانی، اسکریپت های شما باید به شکل زیر باشد:

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watchAll"
  },

با تنظیمات موجود، به نوشتن و اجرای تست ها ادامه دهید.

آزمایش برنامه Next.js To-Do با Jest

در پوشه ریشه پروژه، یک پوشه جدید به نام __tests__ ایجاد کنید. Jest فایل های آزمایشی را در این پوشه جستجو می کند. در داخل این پوشه، یک فایل جدید به نام index.test.js ایجاد کنید.

ابتدا واردات زیر را انجام دهید.

import Home from "../src/pages/index";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";

یک تست بنویسید تا ببینید آیا همه عناصر به درستی رندر می شوند یا خیر:

describe("Todo App", () => {
  it("renders the todo app", () => {
    render(<Home />);
  
    expect(screen.getByTestId("todo-input")).toBeInTheDocument();
    expect(screen.getByTestId("add-todo")).toBeInTheDocument();
  });

});

مورد آزمایشی تأیید می‌کند که برنامه To-Do و عناصر آن به درستی ارائه می‌شوند. در داخل کیس تست، مؤلفه Home با استفاده از تابع render از کتابخانه آزمایشی رندر می شود.

سپس، اظهارات با استفاده از تابع انتظار انجام می شود تا اطمینان حاصل شود که عناصر خاصی با شناسه های آزمایشی، مانند todo-input در خروجی ارائه شده وجود دارند. اگر این عناصر در DOM یافت شوند، آزمون با موفقیت انجام می شود. در غیر این صورت، شکست می خورد.

حال دستور زیر را برای اجرای تست اجرا کنید.

npm run test

در صورت موفقیت در آزمون، باید پاسخ مشابهی را مشاهده کنید.

تست اقدامات مختلف و شبیه سازی خطاها

این موارد آزمایشی را برای تأیید عملکرد ویژگی‌های Add To-Do و Delete To-Do توضیح دهید.

با نوشتن نمونه آزمایشی برای قابلیت Add To-Do شروع کنید.

  it("adds a todo", async () => {
    render(<Home />);
 
    const todoInput = screen.getByTestId("todo-input");
    const addTodoButton = screen.getByTestId("add-todo");
    const todoList = screen.getByTestId("todo-list");
    await act(async () => {
      fireEvent.change(todoInput, { target: { value: "New Todo" } });
      addTodoButton.click();
    });

    await waitFor(() => {
      expect(todoList).toHaveTextContent("New Todo");
    });
  });

قطعه کد بالا با تایپ کردن در یک فیلد ورودی و کلیک کردن روی دکمه افزودن، تعامل کاربر را شبیه‌سازی می‌کند. سپس، با استفاده از یک مقدار ورودی To-Do ساختگی، بررسی می کند که آیا مقدار ورودی با موفقیت به لیست کارهای انجام شده اضافه شده است یا خیر.

فایل را ذخیره کنید و ترمینال را بررسی کنید. آزمون باید به طور خودکار دوباره اجرا شود و نتایج آزمایش مشابه را از سیستم خارج کند.

برای شبیه سازی خطای تست، شناسه تست دکمه افزودن را تغییر دهید و تست را دوباره اجرا کنید. با استفاده از این به روز رسانی، آزمایش باید با شکست مواجه شود و یک پیام خطایی که نشان دهنده خطای خاصی است که با آن مواجه شده است، خارج شود.

در حالت ایده‌آل، در یک پایگاه کد بزرگتر با مشارکت‌کنندگان متعددی که تغییرات مکرر انجام می‌دهند، آزمایش نقش مهمی در شناسایی اشکالات احتمالی ایفا می‌کند که می‌تواند منجر به خرابی سیستم شود. با آزمایش، می‌توانید به راحتی ناسازگاری‌هایی مانند آنچه در بالا نشان داده شد را علامت‌گذاری کنید و در طول توسعه آن‌ها را برطرف کنید.

در نهایت، مورد آزمایشی را برای عملکرد Delete To-Do بنویسید.

  it("deletes a todo", async () => {
    render(<Home />);
  
    const todoInput = screen.getByTestId("todo-input");
    const addTodoButton = screen.getByTestId("add-todo");
  
    fireEvent.change(todoInput, { target: { value: "Todo 1" } });
    fireEvent.click(addTodoButton);
  
    const deleteTodoButton = screen.getByTestId("delete-todo-0");
    fireEvent.click(deleteTodoButton);
  
    const todoList = screen.getByTestId("todo-list");
    await waitFor(() => {
      expect(todoList).toBeEmptyDOMElement();
    });
  });

مجدداً بررسی می کند که آیا To-Do با موفقیت حذف شده است. برای اجرای آزمایش فایل را ذخیره کنید.

تست واحد با استفاده از Jest

این راهنما دانش نوشتن و اجرای تست های واحد ساده را با استفاده از یک جزء To-Do به عنوان مثال در اختیار شما قرار داده است. برای اطمینان از پایداری و قابلیت اطمینان ویژگی‌های اصلی برنامه‌تان و کاهش احتمال بروز مشکلات غیرمنتظره در محیط‌های تولید، اولویت‌بندی تست‌های نوشتن برای اجزای کلیدی مهم است.

علاوه بر این، می‌توانید رویکرد آزمایشی خود را با ترکیب تست‌های عکس فوری و تست‌های انتها به انتها ارتقا دهید.

منبع مقاله