前端加油站🧠

Appearance

技术选型 ​

目前市面上前端测试的测试框架众多，最近比较火热的是Jest、Vitest。大家学习用哪个都行。这里我们使用最主流的Jest。

之所以这个系列采用 Jest，是因为 Jest 其提供的测试函数非常之多，且很多前端框架默认都集成了它作为测试工具，如Ant Design Pro

所以我们需要安装以下一些必备的库。

npm i -D jest # 安装jest

# 以下都是可选安装，最好也是都直接装上。
npm i -D @types/jest # 安装类型 安装之后有语法提示

npm i -D ts-node # typescript 项目必备

npm i -D ts-jest # ts环境的 jest

npm i -D ts-babel @babel/core # babel 转义高级语法

npm i -D jest-environment-jsdom # 在项目中需要使用

npm i -D @babel/preset-typescript # ts环境需要

npm i -D @testing-library/react # react 相关测试
npm i -D jest # 安装jest

# 以下都是可选安装，最好也是都直接装上。
npm i -D @types/jest # 安装类型 安装之后有语法提示

npm i -D ts-node # typescript 项目必备

npm i -D ts-jest # ts环境的 jest

npm i -D ts-babel @babel/core # babel 转义高级语法

npm i -D jest-environment-jsdom # 在项目中需要使用

npm i -D @babel/preset-typescript # ts环境需要

npm i -D @testing-library/react # react 相关测试

首先必须安装的是jest，@testing-library/react是在测试 react 代码的时候需要使用的。后面会涉及到。也可以先不安装，等需要了再安装。单元测试的话就使用jest就足够了。

本人的技术栈是 react，vue 相关的文档没有涉及，不过没关系，思路都是一样的。

项目搭建 ​

这里快速过一下从 0 开始搭建，主要就是跟配置 ts 一样，通过指令生成几个配置文件罢了。

npx jest --init # 生成 jest 的配置文件
npx jest --init # 生成 jest 的配置文件

这个逻辑合 tsc --init 一样，会为我们默认生成一个配置文件。

之后会有一些基本的内容，按照顺序输入 yes 和 no 就好，文件大概会长这样：

ts
module.exports = {
	// 自动清除 Mock
	clearMocks: true,

	// 开启覆盖率
	collectCoverage: true,

	// 指定生成覆盖率报告文件存放位置
	coverageDirectory: 'coverage',

	// 不用管
	coverageProvider: 'v8',
}
module.exports = {
	// 自动清除 Mock
	clearMocks: true,

	// 开启覆盖率
	collectCoverage: true,

	// 指定生成覆盖率报告文件存放位置
	coverageDirectory: 'coverage',

	// 不用管
	coverageProvider: 'v8',
}

配置 babel ​

ts
// babel.config.cjs
module.exports = {
	presets: [
		[
			'@babel/preset-env',
			{
				targets: {
					node: true,
				},
			},
		],
		'@babel/preset-typescript',
	],
}
// babel.config.cjs
module.exports = {
	presets: [
		[
			'@babel/preset-env',
			{
				targets: {
					node: true,
				},
			},
		],
		'@babel/preset-typescript',
	],
}

以 vite 为例，这里文件名结尾是.cjs，因为项目的package.json是type=module。

这个配置主要是为了让 jest 能识别一些 es6+的语法，如import导入之类。

不同的项目配置可能不同，但是可见的点就是都是非常的复杂！以上是关于 vite 的，如果是 webpack 的配置，可能有所不同。不过重要的是坚持住！遇见问题就谷歌上搜索解决方案。熬过这个配置，就可以开始使用啦。

hello world ​

这里用 hello world 可能不太合适，不过差不多，我们来写第一单测：

ts
function add(a: number, b: number) {
	return a + b
}

describe('>>> add', () => {
	it('1+1===2', () => {
		expect(add(1, 1)).toBe(2)
	})
	it('2+3===5', () => {
		expect(add(2, 3)).toBe(5)
	})
})
function add(a: number, b: number) {
	return a + b
}

describe('>>> add', () => {
	it('1+1===2', () => {
		expect(add(1, 1)).toBe(2)
	})
	it('2+3===5', () => {
		expect(add(2, 3)).toBe(5)
	})
})

效果

看到这绿绿的 pass 字样，非常有成就感吧。个人感觉非常的帅气！