前端如何做单元测试?

Lazy_zheng2024-11-10 18:39

1. 前端自动化测试框架

完整的自动化测试框架应包含以下 3 个部分：

  1. 断言库（Assertion Library）：用于比对 "预期输出" 和 "实际输出"，并抛出错误；
  2. 模拟库（Mock Library）：用于模拟数据对象、网络接口等；
  3. 测试运行器（Test Runner）：用于运行测试代码；

一、常用前端单元测试框架：

  1. Jest（完整测试框架）
  • 一个由 Facebook 开源的测试框架，比较新而且目前也比较火
  • 功能全面
  • 零配置
  1. Mocha（核心测试框架）
  • 一个比较成熟的测试框架，社区很大
  • 功能单一但非常灵活，能轻易与其他库结合，比如：Chai（断言库）、Karma（测试运行器）
  • 对异步代码的测试支持的非常好

二、常用的e2e测试框架：

  1. Cypress.io
  2. Puppeteer

2. 使用Jest编写单元测试

使用 Jest 框架来编写单元测试的基本用法

核心内容：

jest 的基本用法，Jest会自动识别和执行项目中所有以.test.js为后缀的测试代码文件。

具体步骤：

  1. 新建项目并安装 jest
bash 复制代码 
npm i jest --save-dev
  1. 编写一些功能代码（先使用 CommonJS 模块，因为用 ESM 需要借助 Babel）

src/util.js

js 复制代码 
function toUpperCase(str) {
    return str ? str.toUpperCase() : ""
}
module.exports = {
    toUpperCase
}
  1. 编写用于测试以上代码的 jest 测试代码

jest 提供的常用测试函数：

  • test()：创建测试用例，代表一个要测试的场景
  • expect()：创建匹配器，并利用 .toBe()、.toEqual() 等方法进行数据比对

src/util.test.js

js 复制代码 
// 导入要测试的模块
const { toUpperCase } = require('./util')
// 测试用例1：传入参数 'hello'，返回 'HELLO'
test('传入hello返回HELLO', () => {
  expect(toUpperCase('hello')).toBe('HELLO')
})

// 测试用例2：传入参数 null，返回 ''
test('传入空值返回空字符串', () => {
  expect(toUpperCase(null)).toBe('')
})
  1. 执行测试
bash 复制代码 
npx jest

运行结果：

如果目标代码使用了 ESM 模块化，那测试代码也需用 ESM。这时需要安装配置 Babel 进行支持：

  1. 安装 babel
sql 复制代码 
npm i babel-jest @babel/core @babel/preset-env --save-dev
  1. 创建 babel.config.js
js 复制代码 
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                node: 'current'
            }
        }]
    ],
};
  1. 在测试代码中使用 import 导入目标测试代码
js 复制代码 
import { toUpperCase } from './util'

3. 统计测试覆盖率

了解测试覆盖率的含义和功能

测试覆盖率，也叫代码覆盖率，指的是被测试的目标代码中至少被执行了一次的条目数占所有条目数的百分比。 它是衡量测试的充分性和完整性的重要指标。

覆盖率根据统计条目的类型，细分为：

  • 语句覆盖率：以代码语句为最小单位；
  • 路径覆盖率：以逻辑路径为最小单位；
  • 函数覆盖率：以函数为最小单位；
  • 代码行覆盖率：以代码行为最小单位；

统计代码覆盖率的目的：

  • 找出遗漏的测试场景
  • 找出没用到的代码

常用工具

  • Jest - 自带了覆盖率统计工具
  • Karma - 借助第三方库 Istanbul

具体步骤

  1. 在上一章节代码中，执行以下命令生成覆盖率报告
bash 复制代码 
npx jest --coverage

运行结果：

另外会生成一个包含 html 格式覆盖率报告的 coverage 目录。

4. 使用Jest测试异步代码

测试包含有如网络请求、定时器等异步行为的目标代码

核心内容：

方式一：回调风格

通过 test() 的回调函数参数 done （它也是个函数，调用它即可告知完成异步任务）

js 复制代码 
test('some desc', done => {
  someAsyncTask(data => {
    try {
      expect(data).toBe('....')
      done()
    } catch(e) {
      done(e)
    }
  })
})

方式二：Promise/async + await 风格

通过在 test() 的回调函数中返回一个 promise 对象

js 复制代码 
test('some desc', () => {
  return someAsyncTask().then(data => {
    expect(data).toBe('...')
  })
})

或直接用 async/await

js 复制代码 
test('some desc', async () => {
  const data = await someAsyncTask()
  expect(data).toBe('...')
})

具体步骤：

  1. src/request.js
js 复制代码 
// 发送请求的异步逻辑
export function getRemoteData() {
  return new Promise((reslove, reject) => {
    const data = {
      status: 200,
      list: [
        { id: 1, label: '三国', },
        { id: 2, label: '水浒传' },
        { id: 3, label: '红楼梦' },
        { id: 4, label: '西游记' }
      ]
    }
    reslove(data);
  })
}
  1. 在 src/request.test.js 测试代码中添加新的测试用例：
js 复制代码 
import { getRemoteData } from './request.js'
// 测试用例3：获取异步数据
test('get remote data', async () => {
    // 测试返回 promise 的异步代码，必须要返回 promise 对象
    // 这样才能让测试正确结束
    const data = await getRemoteData()
    expect(data.status).toBe(200)
})

5.使用Cypress进行e2e测试

安装和使用 Cypress 进行端到端测试

核心内容：

  • 安装和启动 Cypress
  • 编写和运行 Cypress 测试代码

具体步骤：

  1. 安装 Cypress
bash 复制代码 
  npm i cypress --save-dev
  1. 打开 Cypress
bash 复制代码 
npx cypress open

Cypress 会搜索到用户电脑上的所有浏览器，供测试时选用：

  1. 创建e2e测试 测试文件名请按 xxx.cy.js 这种命名规则。

  2. 编写测试代码

e2e测试的本质其实就是模拟用户操作，即用户是如何使用网页界面的。所以 e2e 测试代码就是在利用各种 API 操作网页而已。

Cypress 使用了 Mocha + Chai，因此编写测试代码时用的是来自这两个库的函数，如： describe、it、expect 等。

js 复制代码 
/// <reference types="cypress" />
describe('测试百度搜索功能', () => {
  // 每个测试用例都会执行的前置行为
  beforeEach(() => {
    // 打开百度首页
    cy.visit('https://www.baidu.com')
  })
  // 一个测试用例
  it('应该得到搜索结果', () => {
    // 获取百度首页的关键字输入框，并输入关键字
    cy.get('#kw').type('前端e2e测试')
    // 获取百度首页的搜索按钮，并点击
    cy.get('#su').click()
    // 对比结果
    cy.get('.nums_text').should('have.text', '百度为您找到相关结果约3,190,000个')
  })
})
  1. 点击用例，运行测试

6.测试 Vue 项目

介绍针对 Vue 开发的应用代码进行自动化测试的工具

核心内容：

  1. 针对 Vue 代码的测试工具介绍
  2. 在 Vue 代码中添加测试工具，并编写测试案例

Vue的代码测试涉会及到以下三类：

  • 单元测试（测试函数）- 可使用 Jest 或 Mocha，官方提供了相关插件，可查看官方文档
  • 组件测试（测试Vue组件）- 官方推荐使用 Vue Test Utils 或它的进一步封装库 Vue Testing Library
  • e2e测试（测试界面）- 可使用专为 Vue 封装的 Cypress

具体步骤：

一、测试 Vue 组件

  1. 在现有的 Vue CLI 项目中，通过 vue-cli 提供的命令添加 Vue Testing Library
bash 复制代码 
# 单元测试
vue add @vue/unit-jest
# 端到端测试
vue add @vue/e2e-cypress

执行后项目中会新增测试专用目录 tests ：

  1. 编写一个新组件Counter.vue，并在 App.vue 中调用
js 复制代码 
// Counter.vue
<template>
  <div>
    <h1 class="title">
      当前计数：
      <span class="count">{{ count }}</span>
    </h1>
    <div>
      <button class="btn decrease" @click="decreaseHandler">减少</button>
      <button class="btn increase" @click="increaseHandler">增加</button>
    </div>
  </div>
</template>
​
<script>
  export default {
    props: {
      init: {
        type: Number,
        default: 0
      }
    },
​
    data() {
      return {
        count: this.init
      }
    },
​
    methods: {
      increaseHandler() {
        this.count += 1
      },
​
      decreaseHandler() {
        this.count -= 1
      }
    }
  }
</script>
​
<style>
  .count {
    color: red;
  }
</style>

App.vue中的调用：

ruby 复制代码 
<Counter :init="10"/>
  1. 针对 Counter.vue 组件，编写以下几个单元测试

tests/unit/count.spec.js

js 复制代码 
import Counter from '@/components/Counter.vue'
import { mount } from '@vue/test-utils'

describe('Counter.vue', () => {
  it('不传 init 属性时显示的初始计数是 0', () => {
    // 渲染组件
    const wrapper = mount(Counter)
    // 获取组件内的数据
    expect(wrapper.vm.count).toBe(0)
  })
​
  it('传入 init 属性值为 10 时显示的初始计数是 10', () => {
    const wrapper = mount(Counter, {
      // 为组件传入属性
      propsData: {
        init: 10
      }
    })
    expect(wrapper.vm.count).toBe(10)
  })
  it('点击 3 下增加按钮及 1 下减少按钮，当前计数增加 2', () => {
    const wrapper = mount(Counter)
    // 获取组件内的元素
    const btnIncrease = wrapper.find('.increase')
    const btnDecrease = wrapper.find('.decrease')
    // 模拟用户点击
    btnIncrease.trigger('click')
    btnIncrease.trigger('click')
    btnIncrease.trigger('click')
    
    btnDecrease.trigger('click')
    // 比对数据
    expect(wrapper.vm.count).toBe(2)
  })
})
  1. 运行单元测试
bash 复制代码 
npm run test:unit

一共执行了两个单元测试文件，共执行了4条测试用例。

在以上单元测试中进行数据比对时，都从组件的实例（vm 对象）上获取数据来进行比对，但有时我们想测试的是界面是否已渲染成我们期望的内容，这时应该这样写：

js 复制代码 
it('点击 3 下增加按钮及 1 下减少按钮，当前计数增加 2', async () => {
  const wrapper = mount(Counter)
  // 获取组件内的元素
  const btnIncrease = wrapper.find('.increase')
  const btnDecrease = wrapper.find('.decrease')

  // （修改点1）模拟用户点击（使用 await）
  await btnIncrease.trigger('click')
  await btnIncrease.trigger('click')
  await btnIncrease.trigger('click')
  await btnDecrease.trigger('click')

  // （修改点2）获取界面上的内容来进行数据比较
  expect(wrapper.get('.count').text()).toBe('2')
})

说明：此处使用 await 是因为 click 事件是异步的，这样才能在异步行为发生后正确获取重新渲染后的界面内容。

二、e2e 测试

在 vue 中进行 e2e 测试其实和直接使用 Cypress 没有太大差别。

  1. 通过以下命令启动 Cypress
bash 复制代码 
npm run test:e2e
  1. 和之前一样，编写和运行 Cypress 测试脚本即可
相关推荐
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60619 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅10 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment10 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅10 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊10 小时前
jwt介绍
前端
爱敲代码的小鱼10 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)