在当前的前端当中，有好多同学自己写的代码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😶‍🌫️😶‍🌫️😶‍🌫️