在当前的前端当中，有好多同学自己写的代码bugger横飞，怎么解决这个问题呢🤔🤔🤔？个人觉得主要有以下两个趋势
- 给前端的代码加上类型检查（ts）
- 给前端代码编写单元测试和e2e测试
当然，小孩子才做选择，我们两者都要🤠🤠🤠，那就一起来看看如何在现有的前端基础上加上单元测试和e2e测试吧,上期的2023年了，来试试前端格式化工具文章中主要是用react为基础框架上添加的eslint,prettier等，这一期就以vue为基础框架添加测试方案吧😉😉😉
初始化结构
使用以下命令来初始化一个vue项目的工程
pnpm create vite my-vue-app --template vue
接下来进入对应的目录，安装依赖即可
vitest
vitest是什么，这里就不说了。咱们使用vitest来搭建一个单元测试的环境
使用下面命令来安装vitest
pnpm i vitest -D
然后初始化vitest的配置文件，在根目录下面新建 vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
environment: 'node', // 环境是node环境
passWithNoTests: true, // 如果没有找到测试，Vitest 不会失败。
exclude: ['**/node_modules/**', '**/dist/**'], // 不需要进行测试的文件夹
threads: true // 是否开启多线程
}
})
这样是不是就可以了呢？🤔🤔🤔肯定是的，vitetest就是so easy,那么咋们来写个测试用例来测试下吧😀😀😀
接着新建 src/__test__/index.test.ts 这个测试文件，写一个简单的测试用例:
import { expect, test } from 'vitest'
test('simple test add', () => {
expect(1 + 1).toBe(2) // 测试一个简单的逻辑
expect('map'.slice(1)).toMatchSnapshot('"ap"') // 进行快照测试
})
测试当中的内容分为两段，一段是进行一个简单的js逻辑测试，另一端则是创建一个测试的快照。
最后咱们需要在package.json当中加入一个启动的脚本如下：
"scripts": {
...
+ "test:init": "vitest run"
},
执行的效果如下：
拓展
当然，vitest还给咱们提供了ui界面来方便我们进行测试，如果你想开启的话需要安装一个依赖:
pnpm i @vitest/ui -D
然后在package.json中增加测试脚本：
"scripts": {
...
+ "test:ui": "vitest --ui"
},
接着执行pnpm test:ui，你可以去浏览器查看 Vitest 的 UI 界面:
并且当你的测试用例代码变动时，UI 界面会有实时的热更新效果哦😉😉😉
playwright
单元测试只是用来测试咋们的逻辑有没有问题，通常我们还会对项目进行E2E测试。谈到 E2E 测试，它与单元测试最大的区别就在于，它是从端用户的角度出发，来测试系统的整体行为，一般而言会启动一个无头浏览器(无 UI 界面)，然后去测试页面的 UI 状态和交互表现。
我们使用目前比较流行的一个 E2E 测试套件 playwright，首先安装依赖:
pnpm i @playwright/test -D
当然，这里有的同学会说，用其他的E2E测试包可不可以，对于这个没有强制要求。也可以使用cypress来进行端到端的测试
然后新建配置文件 playwright.config.ts ，内容如下:
import type { PlaywrightTestConfig } from '@playwright/test'
const config: PlaywrightTestConfig = {
testDir: './e2e', // 测试的目录
fullyParallel: true, // 开启多线程
timeout: 50000, // 每个测试最大的执行时间
webServer: {
url: 'http://localhost:5173', //在进行测试启动的本地服务
command: 'pnpm dev' // 测试启动的服务
},
use: {
headless: true // 是否使用无头浏览器来进行测试
}
}
export default config
有了配置文件，接下来启动咋们前端的工程，看下页面中有啥。
并且页面的body当中一定包含文本 Vite + Vue
编写基本测试
在根目录下建立文件e2e/index.test.ts,并且写上一些需要测试的内容：
import { test, expect } from '@playwright/test'
const siteUrl = 'http://localhost:5173'
test('Verify that the page renders properly', async ({ page }) => {
// 打开页面进行测试
await page.goto(siteUrl)
const res = await page.evaluate(async () => {
// 获取页面的内容
const pageContent = document.body.innerText
// 页面的内容一定包含字符串 Vite + Vue
return pageContent.includes('Vite + Vue')
})
expect(res).toBe(true)
})
有了测试用例，咋们来执行看下效果😉😉😉
在package.json中，增加启动测试的脚本如下：
+ "test:e2e": "playwright test"
效果
可以看出执行的结果会打开浏览器进行测试，并且测试是通过的🎉🎉🎉🎉
进行操作测试
这里咋们来模拟点击里面的那个页面中的button,看下效果
在e2e里面新建oper.test.ts来进行操作测试，内容如下：
import { test, expect } from '@playwright/test'
const siteUrl = 'http://localhost:5173'
test('Verify button clicks', async ({ page }) => {
// 页面跳转
await page.goto(siteUrl)
// 找到按钮就行点击
await page.getByRole('button').click()
// 点击后，按钮的文本将变成 count is 1
await expect(page.getByRole('button')).toHaveText('count is 1')
})
结果
通过结果，咋们会发现，里面会启动多个进程来进行测试工作，结果当然也是通过的啦🎉🎉🎉
打开ui，查看测试的步骤
当然，playwright也提供了ui,方便我们进行调试测试的每一步骤，使用的方式如下：
在package.json增加脚本
+ "test:e2eui": "playwright test --ui"
启动后，就可以打开ui测试的界面啦
进行无头测试
作为一名前端工程师，咋们肯定是不想要每一次测试都打开ui来，那不是浪费时间嘛🤔🤔🤔，所以playwright也提供了无头浏览器测试.
在进行无头浏览器测试的时候，需要在本地下载浏览器的内核，不然第一次测试容易超时。
npx playwright install
这里安装时间会比较长
修改playwrite.config.ts如下：
import type { PlaywrightTestConfig } from '@playwright/test'
const config: PlaywrightTestConfig = {
testDir: './e2e', // 测试的目录
fullyParallel: true, // 开启多线程
timeout: 50000, // 每个测试最大的执行时间
webServer: {
url: 'http://localhost:5173', //在进行测试启动的本地服务
command: 'pnpm dev' // 使用启动服务的脚本
},
use: {
- headless: false // 是否使用无头浏览器来进行测试
+ headless: true // 是否使用无头浏览器来进行测试
}
}
export default config
此时进行测试，就不会弹出浏览界面来啦😀😀😀
总结
本文主要分享了，在前端工程化中如何进行搭建一个单元测试和e2e的测试环境。感谢读者朋友读到这里，愿你在日后写的代码永无bugger😶🌫️😶🌫️😶🌫️
