前端测试模块

• 单元测试（以jest 插件以及 react 框架举例）

  • 安装依赖
    -jest（测试框架 ）
    @types/jest（jest 类型定义）
    ts-jest（ts翻译器）
    @testing-library/react（react组件测试工具）
    @testing-library/jest-dom（DOM扩展断言）
    @types/testing-library__jest-dom（DOM类型断言类型）
    @testing-library/user-event（用户交互模拟）
  • jest.config.ts 配置

    import type { Config } from "jest";
    const config: Config = {preset: "ts-jest",testEnvironment: "jsdom", // 模拟浏览器环境moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],  // 解析模块查找的文件搜索清单transform: {"^.+\\.(t|j)sx?$": "ts-jest", // 用 ts-jest 转译 js/ts 文件},transformIgnorePatterns: ["/node_modules/", // 默认忽略 node_modules],extensionsToTreatAsEsm: [".ts", ".tsx"], // 告诉 jest 使用 esm 来处理moduleNameMapper: {// 处理静态资源导入"\\.(css|less|scss|sass)$": "identity-obj-proxy",},setupFilesAfterEnv: ["<rootDir>/setupTests.ts"], // 添加测试环境初始化文件,这里在根目录
    };export default config;
    

  • 根目录setupTests.ts

    import '@testing-library/jest-dom';
    

  • package.json 添加 "test": "jest" (运行test命令前查看ts是否自动转义了js 文件，如果有先删掉)

     "scripts": {"build": "rsbuild build","dev": "rsbuild dev --open","preview": "rsbuild preview","test": "jest"   //添加这行},
    

  • 使用
    • 函数测试用例

      //util/util.ts
      export const add = (a, b) => {return a + b;
      };
      //util/util.test.ts
      import {add} from "./util";
      //describe(name: string, fn: () => void) 
      describe("util moudule test", () => { //测试模块，内部可能包含多个具体测试逻辑//test(name: string, fn: () => void | Promise<void>) 具体的测试逻辑 test("add(1,2) should be 3", () => {const result = add(1, 2);expect(result).toBe(3); // 测试结果是否符合预期});
      });
      

    • 组件测试用例（组件渲染、用户交互）

      //被测试组件App.tsx
      import {useState,
      } from "react";
      import {add} from "./utils/util.ts"
      const App = () => {const [state, setState] = useState<any>(0);const handleClick = () => {setState(pre => pre + 1);};return (<><div>我是首页</div><div>结果：{add(state,2)}</div><button onClick={handleClick}>按钮 + </button></>);
      };
      export default App;//测试逻辑 App.test.tsx
      import { render, screen } from "@testing-library/react";
      import App from "./App";
      import userEvent from "@testing-library/user-event";
      describe("App", () => {test("renders learn react link", () => {//测试组件渲染示例render(<App />);const linkElement = screen.getByText(/我是首页/i); //匹配文字expect(linkElement).toBeInTheDocument();});test("increments count when button is clicked", async () => {//测试用户交互示例const user = userEvent.setup();render(<App />);const button = screen.getByRole("button", { name: /\+/i }); //查找button 按钮const countDisplay = screen.getByText(/结果：/i); //查找显示结果expect(countDisplay).toHaveTextContent("结果：2"); // 初始值为结果：2await user.click(button); // 模拟点击按钮expect(countDisplay).toHaveTextContent("结果：3"); // 点击一次后结果为结果：3});
      });
      

• 端到端测试（Cypress 举例）
  端到端测试模拟真实用户场景，测试整个应用程序的流程，从用户界面到后端服务

  • 安装依赖
    • npm init (可以新建一个项目专门用来进行e2e 测试)
    • npm i cypress
  • 使用
    • cypress 下面有很多测试用例，我们可以通过这些示例写我们自己的测试用例