前端如何做单元测试?

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 测试脚本即可
相关推荐
new Vue()11 分钟前
ES6中Promise的使用场景
开发语言·前端·javascript
Mr.Liu612 分钟前
小程序-使用 iconfont 图标库报错：Failed to load font
前端·微信小程序·小程序
Mr.Liu625 分钟前
小程序25- iconfont 字体图标的使用
前端·微信小程序·小程序
爱写代码的派大星28 分钟前
el-table :span-method 合并单元格（2.0）
前端·javascript·vue.js
stonefisher40 分钟前
深挖`React`里程碑之作`AutoStore`与`helux`的渊源
前端·react.js·前端框架
夫琅禾费米线42 分钟前
CSS 设置宽高的单位概览
前端·javascript·css
用户73087011793081 小时前
Vue项目商家小票页开发：踩坑实录与解决方案
前端
anyup1 小时前
【附源码】微信公众号 h5 网页授权开发
前端·微信·uni-app
余生H1 小时前
transformer.js（四）: 模型接口介绍
前端·javascript·深度学习·transformer
PBitW2 小时前
git 中容易遗忘的点！
前端·git·面试
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04抖音的互联网架构05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10【凡人修仙传_01】散修厉飞羽是如何出师未捷身先死的！