前端自动化测试

常见自动化测试分类
1.单元测试，验证独立的单元模块代码或函数是否正常工作
2.集成测试，验证多个单元模块间的协同工作
3.UI 测试，只针对前端UI部分测试，后端数据采用mock方式
4.端到端测试，从用户的角度，通过机器来模仿用户在真实浏览器中验证应用交互
5.快照测试，验证程序的UI变化

单元测试

Jest

1.安装依赖

npm i jest --save-dev
# 如果是typescript还需要安装 ts
npm i ts-jest babel-jest --save-dev
# 安装类型
npm i @types/jest --save-dev

2.测试命令

{
    ...
    "scripts": {
        "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
  },
}

3.新增配置文件jest.config.js

module.exports = {
    "testEnvironment": "node",
    testMatch: [ //匹配测试用例的文件
        '<rootDir>/test/**/*.test.ts'
    ],
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest', // babel编译
        '^.+\\.ts$': '<rootDir>/node_modules/ts-jest', // typescript编译
    },
    "collectCoverage": true
}

UI测试

UI测试也可以叫组件测试,将前端放在真实环境中运行，而后端和数据都应该使用 Mock 的，示例如下

// React Home.jsx
const Home = ()=>{
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
};

// home.test.js
import React from "react";
import { createRoot } from "react-dom/client"; // createRoot 是React18 新出的特性
import { act } from "react-dom/test-utils"; // react支持测试动作

import Home from "../src/pages/home";

global.IS_REACT_ACT_ENVIRONMENT = true

let root = null;
let container = null;
beforeEach(() => {
    // 创建一个 DOM 元素作为渲染目标
    container = document.createElement("div");
    document.body.appendChild(container);
    root = createRoot(container)
});

afterEach(() => {
    // 退出时进行清理
    // root.unmount(container);
    container.remove();
    container = null;
});

it("渲染有或无名称", () => {
    act(() => {
        root.render(<Home />);
    });
    expect(container.textContent).toBe("Home");
});