Khóa học ReactJS Bài 04 - viết test cho dự án React

npm install -D vitest
npm install -D @vitest/ui

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:run": "vitest run"
  }
}

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath, URL } from "url";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "happy-dom",
    globals: true,
  },
  server: {
    port: 3015,
  },
  resolve: {
    alias: [
      {
        find: "@app",
        replacement: fileURLToPath(new URL("./src", import.meta.url)),
      },
    ],
  },
});

npm run test
npm run test:ui
npm run test:run

{
  "compilerOptions": {
    "typeRoots": ["tests/types"],
    "baseUrl": ".",
    "target": "ES2020",
    // … all other compiler options

    // all paths defined here must match the configured path in `vite.config.ts`
    "paths": {
      "@app/*": ["./src/*"]
    }
  },

  "exclude": ["node_modules", "tests"],
  "include": ["."]
}

import * as vitest from "vitest";
declare global {
  const expect: typeof vitest.expect;
  const describe: typeof vitest.describe;
  const it: typeof vitest.it;
  const test: typeof vitest.test;
}
export {};

import { generatePagers } from "@app/shared/utils";

test("generatePagers", () => {
  const testCases = [
    {
      input: { numberOfPages: 10, currentPage: 1, spaces: 5 },
      output: [1, 2, 3, 4, 5],
    },
    {
      input: { numberOfPages: 10, currentPage: 4, spaces: 5 },
      output: [1, 2, 3, 4, 5],
    },
    {
      input: { numberOfPages: 10, currentPage: 5, spaces: 5 },
      output: [3, 4, 5, 6, 7],
    },
    {
      input: { numberOfPages: 10, currentPage: 8, spaces: 5 },
      output: [6, 7, 8, 9, 10],
    },
    {
      input: { numberOfPages: 10, currentPage: 10, spaces: 5 },
      output: [6, 7, 8, 9, 10],
    },
  ].map((tc) => {
    return {
      output: tc.output,
      result: generatePagers(tc.input),
    };
  });
  expect(testCases[0].result).toEqual(testCases[0].output);
  expect(testCases[1].result).toEqual(testCases[1].output);
  expect(testCases[2].result).toEqual(testCases[2].output);
  expect(testCases[3].result).toEqual(testCases[3].output);
  expect(testCases[4].result).toEqual(testCases[4].output);
});

import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import PaginationComponent from "../../../src/components/PaginationComponent";

/**
 * Test cases
 * 1. Number of pages <= 1 : must not render anything
 * 2. Number of pages <= 5 : always render n pages and 4 buttons:first,previous,next,last with n <=5
 * 3. Number of pages > 1 and current page = 1 : disabled first,previous, enable next,last
 * 4. Number of pages > 1 and current page > 1 && current page is not last page : enable, first, previous, next, last
 * 5. Number of pages > 1 and current page > 1 && current page is last page : enable, first, previous and disable next, last
 * 6. Number of pages > 5 and current page = 5 && pages includes: 3,4,5,6,7
 */
const onChangeCurrentPage = () => {};

describe("Test PaginationComponent", () => {
  test("TC1: Number of pages <= 1 : must not render anything", () => {
    // ARRANGE
    const props = {
      numberOfPages: 1,
      currentPage: 1,
      onChangeCurrentPage,
    };
    render(<PaginationComponent {...props} />);

    // ASSERT
    const pagination = screen.queryByLabelText("pagination");
    expect(pagination).toBeNull();
  });
  test(
    "TC2: Number of pages <= 5 : always render n pages and 4 buttons:first,previous,next,last with n <=5" +
      " \nTC3: Number of pages > 1 and current page = 1 : disabled first,previous, enable next,last",
    () => {
      // ARRANGE
      const props = {
        numberOfPages: 5,
        currentPage: 1,
        onChangeCurrentPage,
      };
      render(<PaginationComponent {...props} />);

      // ASSERT
      const pagination = screen.queryByLabelText("pagination");
      const pageItems = pagination.querySelectorAll("[data-page-item=true]");
      const firstPageItem = pagination.querySelector("[data-page-type=first]");
      const previousPageItem = pagination.querySelector(
        "[data-page-type=previous]"
      );
      const nextPageItem = pagination.querySelector("[data-page-type=next]");
      const lastPageItem = pagination.querySelector("[data-page-type=last]");
      expect(pageItems.length).toEqual(5);
      expect(firstPageItem).toBeTruthy();
      expect(firstPageItem).toHaveClass("disabled");
      expect(previousPageItem).toBeTruthy();
      expect(previousPageItem).toHaveClass("disabled");
      expect(nextPageItem).toBeTruthy();
      expect(nextPageItem).to.not.toHaveClass("disabled");
      expect(lastPageItem).toBeTruthy();
      expect(lastPageItem).to.not.toHaveClass("disabled");
    }
  );
});

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
    }
  ]
}

include: **/*.{test,spec}.?(c|m)[jt]s?(x)
exclude:  **/node_modules/**, **/dist/**, **/cypress/**, **/.{idea,git,cache,output,temp}/**, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*
watch exclude:  **/node_modules/**, **/dist/**