Cách kiểm tra các ứng dụng Next.js bằng Jest

Tạo thành phần việc cần làm

bên trong /src thư mục dự án, mở trang/index.js tệp, hãy xóa mã Next.js soạn sẵn hiện có và thêm mã sau đây.

Đầu tiên, thực hiện các thao tác nhập sau và xác định hai hàm sẽ quản lý Việc cần làm của người dùng: addTodo chức năng và xóaTodo chức năng.

 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);
  }; 

Mã này sử dụng các sử dụngState hook để khởi tạo và cập nhật các biến trạng thái: việc cần làm Và mớiTodo. Các addTodo chức năng thêm một Việc cần làm mới vào danh sách việc cần làm khi giá trị đầu vào không trống, trong khi xóaTodo chức năng xóa một Việc cần làm cụ thể khỏi danh sách dựa trên chỉ mục của nó.

Bây giờ, hãy viết mã cho các phần tử JSX được hiển thị trên DOM của trình duyệt.

 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>
  );} 

Viết test case

Trước khi bạn bắt đầu viết các trường hợp thử nghiệm, điều quan trọng là phải định cấu hình Jest theo các yêu cầu thử nghiệm cụ thể của bạn. Điều này liên quan đến việc tạo và tùy chỉnh jest.config.js tệp, đóng vai trò là nền tảng cho thiết lập thử nghiệm của bạn.

Trong thư mục gốc, tạo mới jest.config.js tài liệu. Sau đó, thêm đoạn mã sau để định cấu hình Jest cho phù hợp:

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

Cuối cùng, mở gói.json tệp và thêm một tập lệnh mới có tên Bài kiểm tra điều đó sẽ thực hiện lệnh jest –watchAll để chạy tất cả các trường hợp thử nghiệm và theo dõi mọi thay đổi.

Sau khi thực hiện cập nhật, tập lệnh của bạn sẽ trông như thế này:

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

Với các cấu hình đã có, hãy tiến hành viết và thực hiện các bài kiểm tra.

Thử nghiệm ứng dụng To-Do Next.js với Jest

Trong thư mục gốc của dự án, tạo một thư mục mới có tên __bài kiểm tra__. Jest sẽ tra cứu các tệp kiểm tra trong thư mục này. Trong thư mục này, tạo một tệp mới có tên index.test.js.

Đầu tiên, thực hiện nhập khẩu sau đây.

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

Viết bài kiểm tra để xem liệu tất cả các phần tử có hiển thị chính xác hay không:

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

Trường hợp thử nghiệm xác minh rằng ứng dụng Việc cần làm và các thành phần của nó hiển thị chính xác. Bên trong trường hợp thử nghiệm, Trang chủ thành phần được kết xuất bằng cách sử dụng kết xuất chức năng từ thư viện thử nghiệm.

Sau đó, các xác nhận được thực hiện bằng cách sử dụng trông chờ chức năng để đảm bảo rằng các phần tử cụ thể có ID thử nghiệm, chẳng hạn như việc cần làm có mặt trong đầu ra kết xuất. Nếu những phần tử này được tìm thấy trong DOM, thử nghiệm sẽ vượt qua; nếu không, nó không thành công.

Bây giờ, hãy chạy lệnh sau để thực hiện kiểm tra.

 npm run test 

Bạn sẽ thấy phản hồi tương tự nếu thử nghiệm vượt qua.

Kiểm tra các hành động khác nhau và mô phỏng lỗi

Mô tả các trường hợp thử nghiệm này để xác minh chức năng của các tính năng Thêm việc cần làm và Xóa việc cần làm.

Bắt đầu bằng cách viết trường hợp thử nghiệm cho chức năng Thêm việc cần làm.

   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");
    });
  }); 

Đoạn mã trên mô phỏng tương tác của người dùng bằng cách nhập vào trường nhập liệu và nhấp vào nút thêm. Sau đó, bằng cách sử dụng giá trị đầu vào Việc cần làm giả, Nó sẽ xác minh xem giá trị đầu vào có được thêm thành công vào danh sách Việc cần làm hay không.

Lưu tệp và kiểm tra thiết bị đầu cuối. Bài kiểm tra sẽ tự động chạy lại và đăng xuất các kết quả kiểm tra tương tự.

Để mô phỏng lỗi kiểm tra, hãy sửa đổi ID kiểm tra nút thêm và chạy lại kiểm tra. Với bản cập nhật này, quá trình kiểm tra sẽ không thành công và đăng xuất sẽ nhận được thông báo lỗi cho biết lỗi cụ thể đã gặp phải.

Lý tưởng nhất là trong một cơ sở mã lớn hơn với nhiều người đóng góp thực hiện các thay đổi thường xuyên, thử nghiệm đóng một vai trò quan trọng trong việc xác định các lỗi tiềm ẩn có thể dẫn đến lỗi hệ thống. Bằng cách thử nghiệm, bạn có thể dễ dàng gắn cờ các điểm không nhất quán, chẳng hạn như điểm không nhất quán được trình bày ở trên và giải quyết chúng trong quá trình phát triển.

Cuối cùng, viết test case cho chức năng 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();
    });
  }); 

Một lần nữa, nó xác minh xem To-Do có được xóa thành công hay không. Lưu tệp để thực hiện kiểm tra.

Kiểm tra đơn vị sử dụng Jest

Hướng dẫn này đã cung cấp cho bạn kiến ​​thức để viết và thực hiện các bài kiểm tra đơn vị đơn giản, sử dụng thành phần Việc cần làm làm ví dụ. Để đảm bảo tính ổn định và độ tin cậy của các tính năng cốt lõi trong ứng dụng của bạn và giảm khả năng xảy ra sự cố không mong muốn trong môi trường sản xuất, điều quan trọng là phải ưu tiên viết bài kiểm tra cho các thành phần chính của bạn.

Hơn nữa, bạn có thể nâng cao phương pháp thử nghiệm của mình bằng cách kết hợp thử nghiệm nhanh và thử nghiệm từ đầu đến cuối.