前端项目中写单元测试其实很简单

、关于自动化测试

1、测试分类

自动化测试类型常分为以下三种，各有优缺点：

• 单元测试（Unit Test)
  • 对项目中低耦合的工具类库和公共子组件进行测试，较为简单，能在一定程度上保障代码质量
• 集成测试（Integration Test）
  • 对于耦合度较高的函数/组件对外暴露的接口进行测试，能较大程度保障产品质量，但开发成本高
• UI测试（UI Test）
  • 前端中UI变动大，适合人工检查

了解测试术语

• 1、TDD（测试驱动开发）
• 2、BDD（行为驱动开发）
• 3、测试覆盖率
• 4、快照测试
• 5、模拟函数
• 6、断言

2、单元测试 框架

• Jest：是一个广受欢迎的单元测试框架，简单易用，功能强大。
• Vitest：它由 Vue / Vite 团队成员开发和维护，在 Vite 的项目集成它会非常简单，而且速度非常快。
• Mocha：一个灵活的测试框架，需要各种插件来配合使用。
• Karma：能在真实的浏览器中测试，可配置其他单元测试框架
• Jasmine：功能全面的测试框架，相对复杂、不够灵活

测试框架太多，且各有优势，大多数写法相差不多。

我们这里选择Jest来分享，其他测试框架可以自行了解。

3、单元测试适用的测试对象有哪些？

• 1、常见工具类函数
• 2、公共子组件
• 3、接口请求数据

二、给项目 配置Jest

1、安装

yarn add -D jest或npm install jest -D

2、配置(非必需)

如果你想获得更多的jest配置，可以增加配置文件。

比如项目中的Jest，默认不显示测试覆盖率和测试报告等，想要支持，就需要我们将Jest的配置文件暴露出来，只需要执行yarn test --init或npx jest --init

然后根据需求选择对应的配置，最后会在根目录下生成jest.config.js文件

根据提示选择即可，这里我们选择JsDom环境，需要代码测试覆盖率报告，自动清除每个单元测试之间的模拟调用和实例。

执行完成后，发现在项目根目录下多了一个jest.config.js文件，里面包含了各种配置说明

module.exports = { // 是否显示覆盖率报告 collectCoverage: true, // 告诉 jest 文件测试要求的阈值，单位为百分比 // coverageThreshold: { // global: { // statements: 90, // 每行 // functions: 80, // 每个函数 // branches: 90 // 分支覆盖率 // } // } }

此时再次执行单元测试，发现显示了测试覆盖率

用浏览器 打开coverage目录下的index.html，可以看到此时页面显示了测试报告

3、配置快速执行命令

package.json

执行命令启动单元测试yarn test或yarn coverage

4、项目配置

一般通过脚手架生成的项目，已经默认配置了测试框架，比如React的项目配置了Jest，Vue3.x项目默认配置了Vitest。

• Jest默认支持Commonjs
  • 如果你的项目不支持ESM，需要安装@babel/core，@babel/preset-env进行转译。
  • 如果你的项目需要支持TS，可以@types/jest、@babel/preset-typescript

执行yarn test发现报错，是因为需要配置babel

配置babel

安装插件，在根目录下新建.babelrc文件

// .babelrc { "plugins": [ [ "@babel/plugin-syntax-jsx" ] ], "presets": [ "@babel/preset-env", "@babel/preset-react" ] }

注意

• 如何支持或忽略.css文件
• 如何忽略单行、函数或文件、目录

5、快速上手单元测试

比如我们有sum.js

export function sum(a, b){ return a + b; } export function mins(a, b){ return a - b; }

为这个函数写测试文件

import { sum, mins } from './sum' it(`should add 1 + 2 to equal 3`, () => { expect(sum(1, 2)).toBe(3); }); test(`mins 2 - 1 to equal 1`, () => { expect(min(2, 1)).toBe(1); })

入门很简单，只需要针对每个函数做一些预期的校验即可，当不小心改动了源代码导致输出的结果和预期不符，将会测试不通过，这样就保证了代码功能的稳定。

describe、test预留字段基本没有区别，描述方式不同，一个it should，另一个test action

三、项目中如何开始写单元测试

写单元测试要考虑清楚几点：

• 测试的主要目的不是证明代码的正确，而是为了发现错误。
• 测试代码，只考虑外部接口，不考虑内部实现
• 充分考虑数据的边界条件
• 对重点、核心代码重点测试
• 减少测试代码数量，避免无用功
• 基于需求写单元测试

1、在项目根目录下新建tests目录，将单元测试文件放在其中，测试文件命名xx.test.js，优点是可以更好的管理测试文件，缺点是不好找到源文件

2、在对应文件的目录下新建__test__目录，测试文件放置其中，优点就是容易找到执行文件，但不容易过滤和管理

1、给工具函数写单元测试

给工具函数写测试函数是单元测试很重要的一个场景，我们以金额千分位格式化处理函数为例，通过单元测试发现问题。

// 将数字千分位格式化后返回对应的字符串 export function getThousandFormatNum(num) { const str = num + ''; const reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d{1,3})(?=(\d{3})+(?:$|\.))/g; return str.replace(reg, '$1,'); }

单元测试

import { getThousandFormatNum } from './common' describe('getThousandFormatNum', () => { // 常规数字格式化 it('should return a string with thousand format', () => { expect(getThousandFormatNum(1000)).toBe('1,000'); expect(getThousandFormatNum(1000000)).toBe('1,000,000'); expect(getThousandFormatNum(123456789)).toBe('123,456,789'); }); // 格式化后和本身相同的数字 it('should return the same number if it is not greater than 999', () => { expect(getThousandFormatNum(0)).toBe('0'); expect(getThousandFormatNum(999)).toBe('999'); }); // 格式化负数 it('should handle negative numbers correctly', () => { expect(getThousandFormatNum(-1000)).toBe('-1,000'); expect(getThousandFormatNum(-1000000)).toBe('-1,000,000'); expect(getThousandFormatNum(-123456789)).toBe('-123,456,789'); }); // 格式化带小数的数字 it('should handle decimal numbers correctly', () => { expect(getThousandFormatNum(1234.56)).toBe('1,234.56'); expect(getThousandFormatNum(1234567.89)).toBe('1,234,567.89'); }); });

执行单元测试

2、给组件写单元测试（快照测试）

前端主要就是组件，但业务组件变动比较频繁，所以倾向于给公共组件或组件库增加单元测试，防止组件扩展或变更导致业务Bug。

我们以APP.js组件为例，写单元测试，并生成快照。

function App() { return ( <div className="App"> <HashRouter basename="/"> <div style={{marginBottom: 20}}> <Link style={{marginRight: 20}} to="/">Home更新版本1</Link> <Link to="/about">About更新版本123</Link> </div> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<AFunction />}></Route> <Route path="/about" element={<BFunction />} /> </Routes> </Suspense> </HashRouter> </div> ); } export default App;

给App.js写单元测试

import { render, screen, act } from '@testing-library/react'; import App from './App'; test('renders learn react link', async () => { let tree; await act(async () => { tree = render(<App />); }) const linkElement = screen.getByText(/About更新版本123/i); expect(linkElement).toBeInTheDocument(); expect(tree).toMatchSnapshot(); });

当我们改动App.js，单元测试发现上个版本的快照更新了，就会报错，提醒检查，如果更改没问题，可以执行u更新快照

3、模拟函数（Mock）

Mock是单元测试中很重要的一部分，他一般在下面场景中使用

• 模拟数据
• 模拟接口请求
• 模拟定时器，比如setTimout 1小时，那每次测试花费一小时就疯了
• 组件使用Redux怎么测试

在组件中，经常有一些引用的变量

const mock = jest.fn(); mock.mockReturnValue(42); mock(); // 42 mock.mockReturnValue(43); mock(); // 43

模拟接口请求

test('async test', async () => { const asyncMock = jest.fn().mockResolvedValue(43); // Promise await asyncMock(); // 43 });

模拟函数有很多，在实际使用过程中需要各种结合使用，这里仅展示了最简单的使用。

4、常用断言方法

在工具函数测试过程中，我们常常要判断变量类型和值，测试框架往往提供了判断方法，下面是Jest一些常见的判断，更多可以查阅官网

toBe：判断测试结果为某个值

not：否定判断

test('the best flavor is not coconut', () => { expect(bestLaCroixFlavor()).toBe('coconut'); }); test('the best flavor is not coconut', () => { expect(bestLaCroixFlavor()).not.toBe('coconut'); });

toEqual：检测引用类型，递归检查属性和属性值

toEqual会调用Object.is方法，toBe ===

const can1 = { flavor: 'grapefruit', ounces: 12, }; const can2 = { flavor: 'grapefruit', ounces: 12, }; describe('the La Croix cans on my desk', () => { test('have all the same properties', () => { expect(can1).toEqual(can2); // true }); test('are not the exact same can', () => { expect(can1).not.toBe(can2); // true }); });

toMatch：匹配字符串规则，正则匹配

describe('an essay on the best flavor', () => { test('mentions grapefruit', () => { expect(essayOnTheBestFlavor()).toMatch(/grapefruit/); expect(essayOnTheBestFlavor()).toMatch(new RegExp('grapefruit')); }); });

toBeTruthy：匹配if条件为真

drinkSomeLaCroix(); if (thirstInfo()) { drinkMoreLaCroix(); }

四、查看单元测试的结果

单元测试完成后，执行测试命令

yarn test或npx jest

1、测试覆盖率解读

• Stmts (Statements)：语句覆盖率，即被测试覆盖的代码语句的百分比。在你的代码中，92.85% 的语句被测试覆盖。
• Branch：分支覆盖率，即被测试覆盖的条件分支的百分比。在你的代码中，100% 的分支被测试覆盖。
• Funcs (Functions)：函数覆盖率，即被测试覆盖的函数的百分比。在你的代码中，83.33% 的函数被测试覆盖。
• Lines：行覆盖率，即被测试覆盖的代码行数的百分比。在你的代码中，100% 的行被测试覆盖。
• Uncovered Line：未覆盖的行号。这一列列出了未被测试覆盖的代码行的行号范围。

2、测试信息解读

• Test Suites: 2 passed, 2 total：这表示你有 2 个测试套件，其中所有的 2 个测试套件都通过了。
• Tests: 8 passed, 8 total：这表示你一共运行了 8 个测试，其中所有的 8 个测试都通过了。
• Snapshots: 1 total：这表示1个快照测试（Snapshot Testing）。
• Time: 2.703 s：这表示测试运行的时间为 2.703 s 秒。

3、参考

• Jest官网
• Jest实践指南

最后：下方这份完整的软件测试 视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​​​软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。