前端工程化之自动化测试

提示：自动化测试：写基础包的一定要进行自动化测试，为了让使用者使用的更放心，使用开源包也是看是否有自动化测试，还要看测试覆盖范围是否是比较齐全的，小厂的话不太关注，中大厂的话使用第三方的包是非常关注自动化测试的

自动化测试

为什么需要测试？

工作当中基本上是写业务代码，提交后将我们的功能提交给测试进行验证，为了保障整体的稳定性

• 及时发现问题
• 拆分模块的话，需要写单测
• 提高代码质量

什么时候需要考虑测试

• 公共库一类项目，一定要前端测试
• 中长期项目的迭代，建议需要测试，单元测试，E2E测试
• 重构场景，相关代码有了测试后，接手项目时候，可能并不了解业务逻辑，业务架构，重构项目会面临大的风险，但是有了单元测试，可以看到之前测试

测试类型

1. 单元测试 unit test，小的功能模块进行测试
2. E2E测试，端到端的测试，测试 UI+接口 相关内容，会将一些固定的流程，变成自动化任务，之后跑一下自动化任务，通过这种E2E测试在模拟设备上做一些模拟的交互，将流程固化，人工只需要看每个步骤的效果，截图等
3. 集成测试，模块测试
4. UI 测试 整体页面出发，看页面布局，看页面是否有空窗等，在布局维度，看是否与预期相符 => 使用场景：灰度发布，UI布局的验证，稳定性 => 是否白屏

前端测试框架

• 测试框架：Jest、vitest(vite)、@vue/test-utils、mocha(少用)
• 断言库：Assert
• 工具：无头浏览器 puppeteer(node环境下的浏览器，使用chrome内核)，可以读取对应文件，以及对文件进行爬取，获取当前文件结构，还有截屏功能

单元测试

通过确定的测试用例来编写测试代码，保证测试用例通过，以及测试覆盖率范围
判断测试用例的结果是true还是false，表明测试通过与否

例子：
test.js:

// test.js
const chalk = require('chalk')
// 测试原理部分的内容
// 一般测试框架（jest）需要做的事情// 描述测试场景
function describe(desc, fn) {console.log(chalk.green(desc))fn()
}// 单元用例测试描述
function it(desc, fn) {console.log(chalk.yellow(desc))fn()
}// 作比对，看是 true、还是 false，这个库其实在测试领域有一个专业术语叫：断言库
function expect(result) {return {toBe(actual) {if (result != actual) {console.log(chalk.red('FAIL', result, actual))throw new Error(`预期值和实际值不相等，预期${actual}，实际${result}`)}console.log(chalk.green('PASS', result, actual))},toEqual(actual) {if (result !== actual) {throw new Error(`预期值和实际值不相等，预期${actual}，实际${result}`)}},}
}module.exports = {describe,it,expect,
}

创建测试文件:
__index__.test.js

// 创建测试文件
// __index__.test.jsconst { describe, it, expect } = require('./test')// 定义 sum 函数
function sum(a, b) {return a + b
}// 测试用例
describe('用来测试相关内容', () => {it('测试 sum 函数', () => {expect(sum(1, 1)).toBe(2)})it('测试 sum 函数其他的场景', () => {expect(sum(1, 2)).toBe(4)})
})

Jest 重点掌握

项目示例

package.json

{"name": "react-test-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "jest"},"keywords": [],"license": "ISC","dependencies": {"react": "18.2.0","react-dom": "18.2.0"},"devDependencies": {"@types/react": "18.2.73","@babel/core": "7.23.2","@babel/preset-env": "7.23.2","@babel/preset-react": "7.22.15","@babel/preset-typescript": "7.23.2","babel-loader": "9.1.3","typescript": "5.2.2","webpack": "5.89.0","webpack-cli": "5.1.4","jest": "29.7.0","@jest/globals": "29.7.0","ts-jest": "29.1.2","react-test-renderer": "18.2.0"}
}

src/utils/math.ts

export const sum = (a: number, b: number) => a + b
export const subtract = (a: number, b: number) => a - b
export const multiply = (a: number, b: number) => a * b
export const divide = (a: number, b: number) => a / b
export const pow = (a: number, b: number) => a ** b

src/utils/math.test.ts

import { describe, expect, test } from '@jest/globals'describe('math test', () => {test('sum test', () => {expect(1 + 2).toBe(3)})
})

进行测试

npx ts-jest config:init

=> 生成 jest.config.js文件

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {preset: 'ts-jest',testEnvironment: 'node',
};

pnpm run test

jest.config.js

增加配置：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {preset: 'ts-jest',testEnvironment: 'node',collectCoverage: true, //开启当前测试覆盖率collectCoverageFrom: ['src/**/*.{ts,tsx}'], //测试覆盖率的范围，tsx:需要进行快照测试
}

重新执行：

pnpm run test

=> 生成测试覆盖率的结果 以及 coverage 目录文件

覆盖率

• stmts 语句覆盖率
• branch 分支覆盖率
• funcs 函数覆盖率
• lines 行覆盖率

直观看覆盖率

coverage/lcov-report/index.html

页面从浏览器中打开

math.ts 点进去看：

由于main.ts中没有一个被引用，因此为 Statements 语句 为 0

src/main.test.ts

内容改了后：

import { describe, expect, test } from '@jest/globals'
import { sum } from './math'
describe('math test', () => {test('sum test', () => {expect(sum(1,2)).toBe(3)})
})

pnpm run test

执行结果：

点进去 main.ts，发现只有 sum 没标红

tsconfig.json

{"compilerOptions": {"jsx": "react", //react编译jsx"esModuleInterop": true //esm},"include": ["./src/**/*"], //包含文件"exclude": ["node_modules"] //不包含文件
}

生命周期逻辑

• beforeAll 所有用例执行前调用
• beforeEach 每个用例执行前
• afterAll 所有测试完毕
• afterEach 每个case end

断言钩子：

• toBe 严格对比 => 内存空间一致
• toEqual 值对比 => 对象递归遍历，对比值

const x = { a: { b: 3 } }
const y = { a: { b: 3 } }console.log(expect(x).toBe(y)) // fail
console.log(expect(x).toEqual(y)) // pass

src/utils/math.test.ts

import {afterAll,beforeAll,beforeEach,describe,expect,test,afterEach,
} from '@jest/globals'
import { divide, multiply, subtract, sum } from './math'describe('math test', () => {beforeAll(() => {console.log('beforeAll')})beforeEach(() => {console.log('beforeEach')})test('sum test', () => {expect(sum(1, 2)).toBe(3)})test('subtract test', () => {expect(subtract(2, 1)).toBe(1)})test('multiply test', () => {expect(multiply(2, 3)).toBe(6)})test('divide test', () => {expect(divide(6, 3)).toBe(2)})afterEach(() => {console.log('afterEach')})afterAll(() => {console.log('afterAll')})
})

pnpm run test

src/utils/math2.test.ts

借助AI工具生成测试用例：

import { expect, test } from '@jest/globals'
import { pow } from '../utils/math'test('Should return the correct result for positive integer powers', () => {expect(pow(2, 3)).toBe(8)expect(pow(3, 2)).toBe(9)expect(pow(5, 1)).toBe(5)
})
test('Should return 1 when the base and exponent are both 0', () => {expect(pow(0, 0)).toBe(1)
})
test('Should return NaN when the exponent is NaN', () => {expect(pow(2, NaN)).toBe(NaN)
})

快照测试

想要确保UI不会有意外变化的时候，快照是一个非常有用的工具
典型的是，在渲染UI组件后，会保存一个快照文件，主要是为了跟下次执行当前快照时候进行一个比对，看两者比对的结果，当前的case和快照的能否匹配上，匹配不上就是一个异常，当然也能更改快照测试的版本

src/hooks/useBoolean.ts

import { useState } from 'react'export const useBoolean = (initialValue: boolean) => {const [bol, setBol] = useState(initialValue)const toggle = () => setBol(!bol)return [bol, toggle] as const
}

src/components/Button/index.tsx

import React from 'react'
import { useBoolean } from '../../hooks/useBoolean'const bottonTypes = ['primary', 'secondary', 'tertiary'] as consttype ButtonType = (typeof bottonTypes)[number]interface ButtonProps {type: ButtonTypechildren: React.ReactNode
}export const Button: React.FC<ButtonProps> = ({type = 'primary',children,
}) => {const [isDisabled, toggle] = useBoolean(false)return (<buttondisabled={isDisabled}onClick={toggle}className={`button button--${type}`}>{children}</button>)
}

src/components/Button/Button.test.tsx

import renderer from 'react-test-renderer' //渲染当前组件
import { Button } from './index'
import React from 'react'
import { describe, it, expect } from '@jest/globals'describe('Button', () => {it('renders correctly', () => {const tree = renderer.create(<Button type="primary">Hello4</Button>).toJSON()expect(tree).toMatchSnapshot()})
})

pnpm run test

生成_snapshots_文件：

将 hello4 改为 hello 会报错：

import renderer from 'react-test-renderer'
import { Button } from './index'
import React from 'react'
import { describe, it, expect } from '@jest/globals'describe('Button', () => {it('renders correctly', () => {const tree = renderer.create(<Button type="primary">Hello</Button>).toJSON()expect(tree).toMatchSnapshot()})
})

更新快照：

npx jest --updateSnapshot

重新生成一个快照：

coverage/lcov-report/index.html

点击 utils:

点击 hooks:

点击 components/Button：

Vitest 重点掌握

vitest
一个原生支持 Vite 的测试框架

项目示例

文件内容

package.json

{"name": "my-vue3-app","private": true,"version": "1.0.20","type": "module","scripts": {"dev": "vite --debug","build": "vite build","preview": "vite preview",// 追加一些脚本"test": "vitest",  //使用Vitest进行测试"test:coverage": "vitest run --coverage", //开启测试覆盖率"test:ui": "vitest --ui" //使用UI的方式查看测试覆盖率的情况},"dependencies": {"@vitest/ui": "^3.0.9", //vitest --ui命令需要的依赖"vue": "^3.4.19"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.4","@vitest/coverage-istanbul": "^3.0.8","@vitest/coverage-v8": "3.0.8", //跑测试用例"@vue/test-utils": "^2.4.6", //渲染当前组件的方法和工具类"happy-dom": "^17.4.2", //happy-dom和jsdom可以二选一，获取当前dom数据和结构，触发当前dom节点"jsdom": "^26.0.0","vite": "^5.1.4","vitest": "^3.0.8" //还需要安装vitest依赖}
}

vite.config.js

vitest 可以复用vite配置，因此在vite.config.js中需要添加test相关的配置项

/// <reference types="vitest" />import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import myVitePlugin from './plugins/myPlugin'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), myVitePlugin()],// test相关的配置项test: {environment: 'jsdom', //jsdom/happy-dom模拟dom// 覆盖率coverage: {reporter: ['text', 'json', 'html'],// 设置覆盖文件夹reportsDirectory: './coverage',// 检查每个文件的阈值perFile: true,// 设置代码覆盖率阈值lines: 75,functions: 75,branches: 75,statements: 75,},},
})

plugins/myPlugin.js

import path from 'path'
import fs from 'fs'
// 控制台打印当前工程版本号
export default function myVitePlugin() {let version, configreturn {name: 'my-vite-plugin',configResolved(resolvedConfig) {config = resolvedConfigconst pkgPath = path.resolve(config.root, 'package.json')const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))version = pkg.version},buildStart() {console.log('当前工程版本号：1.0.0')},transform(code, id) {if (id.endsWith('main.js')) {const info = `console.log('当前工程版本号：${version}')`return `${code}\n${info}\n`}},}
}

src/components/hello/index.vue

<template><div>{{ count }} x {{ times }} = {{ result }}</div><button @click="times += 1">x1</button>
</template><script setup lang="ts">
import { computed, ref } from 'vue'const props = defineProps<{ count: number }>()const times = ref(2)
const result = computed(() => props.count * times.value)defineExpose(props)
</script>

src/components/hello/__test__/index.spec.js

// Hello/__test__/index.spec.ts
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'import Hello from '../index.vue'
describe('Hello', () => {test('挂载组件', async () => {// 断言当前组件存在expect(Hello).toBeTruthy()// 挂载当前组件内容const wrapper = mount(Hello, {props: {count: 4,},})// 获取组件的button触发点击事件，模拟用户点击await wrapper.get('button').trigger('click')// 点击后，组件的内容发生变化，断言的值也会发生变化 expect(wrapper.text()).toContain('4 x 3 = 12')// 再次点击await wrapper.get('button').trigger('click')// 断言组件再次内容变化expect(wrapper.text()).toContain('4 x 4 = 16')})// 对当前组件进行快照测试test('组件渲染快照', () => {const wrapper = mount(Hello, {props: {count: 5,},})expect(wrapper.html()).toMatchSnapshot()})
})

test/basic.test.js

import { assert, describe, expect, it } from 'vitest'describe('suite name', () => {it('foo', () => {assert.equal(Math.sqrt(4), 2)})it('bar', () => {expect(1 + 1).eq(2)})it('snapshot', () => {expect({ foo: 'bar' }).toMatchSnapshot()})
})

启动测试

pnpm run test

生成快照：

src/components/hello/__test__/index.spec.js

修改组件快照count的值

// Hello/__test__/index.spec.ts
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'import Hello from '../index.vue'
describe('Hello', () => {test('挂载组件', async () => {// 断言当前组件存在expect(Hello).toBeTruthy()// 挂载当前组件内容const wrapper = mount(Hello, {props: {count: 4,},})// 获取组件的button触发点击事件，模拟用户点击await wrapper.get('button').trigger('click')// 点击后，组件的内容发生变化，断言的值也会发生变化 expect(wrapper.text()).toContain('4 x 3 = 12')// 再次点击await wrapper.get('button').trigger('click')// 断言组件再次内容变化expect(wrapper.text()).toContain('4 x 4 = 16')})// 对当前组件进行快照测试test('组件渲染快照', () => {const wrapper = mount(Hello, {props: {count: 6, //修改组件快照count的值},})expect(wrapper.html()).toMatchSnapshot()})
})

报错：

按 u 更新快照：

test-ui

pnpm run test:ui

浏览器打开页面

E2E测试 —— 端到端测试

puppeteer 框架处理

• 生成快照，图片/pdf 的形式进行存储
• 爬取页面内容
• 表单自动化提交
• UI测试
• 测试 chrome 扩展 （chrome内核就会让我们在node环境下去获取当前页面的内容，不会再去局限于浏览器环境下面）
• 页面性能数据

重要的点

• Browser 对应浏览器实例
• Page，tab页面
• ExecutionContext，js 的执行环境
• ElementHandle 对应 dom 元素节点
• jsHandler 对应dom中 js 对象

安装

pnpm install puppeteer

项目示例

package.json

{"name": "f2e-test","version": "1.0.0","description": "前端测试","main": "index.js","scripts": {"test": "jest --watchAll"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.20.5","@babel/preset-env": "^7.20.2","@babel/preset-typescript": "^7.18.6","@types/jest": "^29.2.4","body-parser": "^1.20.1","express": "^4.18.2","jest": "^29.3.1","puppeteer": "^19.4.1"}
}

jest.config.js

module.exports = {// 是否显示覆盖率报告collectCoverage: true,collectCoverageFrom: ['src/**/*'],coverageThreshold: {global: {statements: 90,functions: 90,branches: 90,},},
};

.babelrc

{"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

.babelrc

前端

public/login.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>login</title><style>div {text-align: center;}button {display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;text-align: center;box-sizing: border-box;outline: none;margin: 0;transition: 0.1s;font-weight: 500;padding: 12px 20px;font-size: 14px;border-radius: 4px;color: #fff;background-color: #409eff;border-color: #409eff;border: 0;}button:active {background: #3a8ee6;border-color: #3a8ee6;color: #fff;}input {display: block;margin: auto;margin-bottom: 10px;-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;font-size: inherit;height: 40px;line-height: 40px;outline: none;padding: 0 15px;transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);}</style></head><body><div><input type="text" placeholder="请输入账号" class="account" /><input type="password" placeholder="请输入密码" class="password" /><button id="btn-login">登录</button></div><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script><script>document.querySelector('button').onclick = () => {axios.post('/login', {account: document.querySelector('.account').value,password: document.querySelector('.password').value,}).then((res) => {if (res.data.code == 0) {location.href = '/index.html';} else {alert(res.data.msg);}});};</script></body>
</html>

public/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>index</title></head><body>Hello World!</body>
</html>

后端

server/index.js

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const port = 8080;app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());app.post('/login', (req, res) => {const { account, password } = req.body;// 由于没有注册功能，所以假定账号密码都为 adminif (account == 'admin' && password == 'admin') {res.send({msg: '登录成功',code: 0,});} else {res.send({msg: '登录失败，请输入正确的账号密码',code: 1,});}
});app.listen(port, () => {console.log(`Example app listening at http://localhost:${port}`);
});

puppeteer/index.js

const puppeteer = require('puppeteer');(async () => {// 无头浏览器，创建browser实例const browser = await puppeteer.launch({headless: false,});// 创建一个页面const page = await browser.newPage();// 访问页面await page.goto("http://localhost:8080/login.html");//   3. 初始页面截图await page.screenshot({path: `screenshot_${new Date().getTime()}.png`,});//   4. 获取dom元素 输入内容await page.type(".account", "admin");await page.type(".password", "admin");setTimeout(async () => {//   5.模拟点击操作const btnConfirm = await page.$("#btn-login");await Promise.all([btnConfirm.click(), page.waitForNavigation()]);//   6.最后截屏await page.screenshot({path: `screenshot_${new Date().getTime()}.png`,});}, 5000);//   elementhandle//// browser.close()
})()

puppeteer/screen.js

const puppeteer = require('puppeteer');
const sleep = (time) => {new Promise((resolve, reject) => {setTimeout(resolve, time);});
};(async () => {const browser = await puppeteer.launch({headless: false,});const page = await browser.newPage();await page.goto('https://baidu.com');//   await page.screenshot({//     path: `screenshot_${new Date().getTime()}.png`,//   });//   理解两个环境// node// page dom environment//   elementhandle jshandleconst input = await page.$('#form');await sleep(5000);await input.screenshot({path: `screenshot_${new Date().getTime()}.png`,});browser.close();
})();

启动服务

pnpm i

node server/index.js

node .\puppeteer\index.js