前端如何做单元测试? 看这篇就入门了

news2025/1/13 6:11:08

前言

对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例,让你掌握写单元测试实践能力。

前端为什么需要单元测试?

必要性:JavaScript 缺少类型检查,编译期间无法定位到错误,单元测试可以帮助你测试多种异常情况。

正确性:测试可以验证代码的正确性,在上线前做到心里有底。

自动化:通过 console 虽然可以打印出内部信息,但是这是一次性的事情,下次测试还需要从头来过,效率不能得到保证。通过编写测试用例,可以做到一次编写,多次运行。

保证重构:互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎么才能保证重构后代码的质量呢?有测试用例做后盾,就可以大胆的进行重构。

现状

下面是一份抽样调查片段,抽样依据如下:

向 200 名相关者发出在线问卷调查,其中 70 人回答了问卷中的问题,前端人数占 81.16%,如果你有兴趣的话,也可以帮我填一下调查问卷 (https://www.wjx.cn/vm/Ombu9q1.aspx)

数据收集日期:2021.09.21—2021.10.08

目标群体:所有开发人员

组织规模:不到 50 人,50 到 100人, 100人以上

你执行过 JavaScript 单元测试吗?

图片

调查中的另一个有趣的见解是,在大型组织中单元测试更受欢迎。其中一个原因可能是,由于大型组织需要处理大规模的产品,以及频繁的功能迭代吧。这种持续的迭代方式,迫使他们进行自动化测试的投入。更具体地说,单元测试有助于增强产品的整体质量。

图片

另外,报告显示超 80% 人认为单元测试可以有效的提高质量,超 60% 人使用过 Jest 去编写前端单元测试,超 40% 的人认为单元测试覆盖率是重要的且覆盖率应该大于 80%。

常见单元测试工具

目前用的最多的前端单元测试框架主要有 Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/),但我推荐你使用 Jest,因为 Jest 和 Mocha 相比,无论从 github starts & issues 量,npm下载量相比,都有明显优势。

github stars 以及 npm 下载量的实时数据,参见:jest vs mocha (https://www.npmtrends.com/jest-vs-mocha) 截图日期为 2021.11.25

Github stars & issues

 

图片

npm 下载量

Jest 的下载量较大,一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 react 项目都是用它生成的。

图片

从 github starts & issues 以及 npm 下载量角度来看,Jest 的关注度更高,社区也更活跃

框架对比

Mocha 生态好,但是需要较多的配置来实现高扩展性

Jest 开箱即用

比如对 sum 函数写用例

./sum.js

function sum(a, b) {
  return a + b;
}

module.exports = sum;

Mocha + Chai 方式

Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具

./test/sum.test.js

const { expect, assert } = require('chai');
const sum = require('../sum');

describe('sum', function() {
  it('adds 1 + 2 to equal 3', () => {
    assert(sum(1, 2) === 3);
  });
});

 

Jest 方式

Jest 默认支持断言,同时默认支持覆盖率测试

./test/sum.test.js

const sum = require('./sum');

describe('sum function test', () => {
  it('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别,it 是指: it should xxx, test 是指 test xxx
  test('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
})

 

可见无论是受欢迎度和写法上,Jest 都有很大的优势,因此推荐你使用开箱即用的 Jest

如何开始?

1.安装依赖

npm install --save-dev jest

2.简单的例子

首先,创建一个 sum.js 文件

./sum.js

function sum(a, b) {
  return a + b;
}

module.exports = sum;

创建一个名为 sum.test.js 的文件,这个文件包含了实际测试内容:

./test/sum.test.js

const sum = require('../sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

将下面的配置部分添加到你的 package.json 里面

{
  "scripts": {
    "test": "jest"
  },
}

运行 npm run test ,jest 将打印下面这个消息

图片

3.不支持部分 ES6 语法

nodejs 采用的是 CommonJS 的模块化规范,使用 require 引入模块;而 import 是 ES6 的模块化规范关键字。想要使用 import,必须引入 babel 转义支持,通过 babel 进行编译,使其变成 node 的模块化代码

如以下文件改写成 ES6 写法后,运行 npm run test将会报错

./sum.js

export function sum(a, b) {
  return a + b;
}

./test/sum.test.js

import { sum } from '../sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

图片

为了能使用这些新特性,我们就需要使用 babel 把 ES6 转成 ES5 语法

解决办法

安装依赖

npm install --save-dev @babel/core @babel/preset-env

 根目录加入.babelrc

{   "presets": ["@babel/preset-env"] }

再次运行 npm run test ,问题解决

图片

原理

jest 运行时内部先执行( jest-babel ),检测是否安装 babel-core,然后取 .babelrc 中的配置运行测试之前结合 babel 先把测试用例代码转换一遍然后再进行测试

4.测试 ts 文件

jest 需要借助 .babelrc 去解析 TypeScript 文件再进行测试

安装依赖

npm install --save-dev @babel/preset-typescript

 **改写 **.babelrc

{   "presets": ["@babel/preset-env", "@babel/preset-typescript"] }

为了解决编辑器对 jest 断言方法的类型报错,如 test、expect 的报错,你还需要安装

npm install --save-dev @types/jest

./get.ts

/**
 * 访问嵌套对象,避免代码中出现类似 user && user.personalInfo ? user.personalInfo.name : null 的代码
 */
export function get<T>(object: any, path: Array<number | string>, defaultValue?: T) : T {
  const result = path.reduce((obj, key) => obj !== undefined ? obj[key] : undefined, object);

  return result !== undefined ? result : defaultValue;
}

./test/get.test.ts

import { get } from './get';

test('测试嵌套对象存在的可枚举属性 line1', () => {
  expect(get({
    id: 101,
    email: 'jack@dev.com',
    personalInfo: {
      name: 'Jack',
      address: {
        line1: 'westwish st',
        line2: 'washmasher',
        city: 'wallas',
        state: 'WX'
      }
    }
  }, ['personalInfo', 'address', 'line1'])).toBe('westwish st');
});

运行 npm run test

图片

5.持续监听

为了提高效率,可以通过加启动参数的方式让 jest 持续监听文件的修改,而不需要每次修改完再重新执行测试用例

改写 package.json

"scripts": {     "test": "jest --watchAll"   },

 

效果

图片

5.生成测试覆盖率报告

什么是单元测试覆盖率?

 单元测试覆盖率是一种软件测试的度量指标,指在所有功能代码中,完成了单元测试的代码所占的比例。有很多自动化测试框架工具可以提供这一统计数据,其中最基础的计算方式为:

单元测试覆盖率 = 被测代码行数 / 参测代码总行数 * 100%

如何生成?

加入 jest.config.js 文件

module.exports = {
  // 是否显示覆盖率报告
  collectCoverage: true,
  // 告诉 jest 哪些文件需要经过单元测试测试
  collectCoverageFrom: ['get.ts', 'sum.ts', 'src/utils/**/*'],
}

再次运行效果

图片

参数解读
在这里插入图片描述

设置单元测试覆盖率阀值

个人认为既然在项目中集成了单元测试,那么非常有必要关注单元测试的质量,而覆盖率则一定程度上客观的反映了单测的质量,同时我们还可以通过设置单元测试阀值的方式提示用户是否达到了预期质量。

jest.config.js 文件

module.exports = {
  collectCoverage: true, // 是否显示覆盖率报告
  collectCoverageFrom: ['get.ts', 'sum.ts', 'src/utils/**/*'], // 告诉 jest 哪些文件需要经过单元测试测试
  coverageThreshold: {
    global: {
      statements: 90, // 保证每个语句都执行了
      functions: 90, // 保证每个函数都调用了
      branches: 90, // 保证每个 if 等分支代码都执行了
    },
  },

上述阀值要求我们的测试用例足够充分,如果我们的用例没有足够充分,则下面的报错将会帮助你去完善

图片

6.如何编写单元测试

下面我们以 fetchEnv 方法作为案例,编写一套完整的单元测试用例供读者参考

编写 fetchEnv 方法

./src/utils/fetchEnv.ts 文件

/**
 * 环境参数枚举
 */
 enum IEnvEnum {
  DEV = 'dev', // 开发
  TEST = 'test', // 测试
  PRE = 'pre', // 预发
  PROD = 'prod', // 生产
}

/**
 * 根据链接获取当前环境参数
 * @param {string?} url 资源链接
 * @returns {IEnvEnum} 环境参数
 */
export function fetchEnv(url: string): IEnvEnum {
  const envs = [IEnvEnum.DEV, IEnvEnum.TEST, IEnvEnum.PRE];

  return envs.find((env) => url.includes(env)) || IEnvEnum.PROD;
}

 

编写对应的单元测试

./test/fetchEnv.test.ts 文件

import { fetchEnv } from '../src/utils/fetchEnv';

describe('fetchEnv', () => {
  it ('判断是否 dev 环境', () => {
    expect(fetchEnv('https://www.imooc.dev.com/')).toBe('dev');
  });

  it ('判断是否 test 环境', () => {
    expect(fetchEnv('https://www.imooc.test.com/')).toBe('test');
  });

  it ('判断是否 pre 环境', () => {
    expect(fetchEnv('https://www.imooc.pre.com/')).toBe('pre');
  });

  it ('判断是否 prod 环境', () => {
    expect(fetchEnv('https://www.imooc.prod.com/')).toBe('prod');
  });

  it ('判断是否 prod 环境', () => {
    expect(fetchEnv('https://www.imooc.com/')).toBe('prod');
  });
});

执行结果

图片

7.常用断言方法

关于断言方法有很多,这里仅摘出常用方法,如果你想了解更多,你可以去 Jest 官网 API (https://www.jestjs.cn/docs/expect) 部分查看

.not 修饰符允许你测试结果不等于某个值的情况

./test/sum.test.js

import { sum } from './sum';

test('sum(2, 4) 不等于 5', () => {
  expect(sum(2, 4)).not.toBe(5);
})

 ./src/utils/userInfo.js

export const getUserInfo = () => {
  return {
    name: 'moji',
    age: 24,
  }
}

./test/userInfo.test.js

import { getUserInfo }  from '../src/userInfo.js';

test('getUserInfo()返回的对象深度相等', () => {
  expect(getUserInfo()).toEqual(getUserInfo());
})

test('getUserInfo()返回的对象内存地址不同', () => {
  expect(getUserInfo()).not.toBe(getUserInfo());
})

.toHaveLength 可以很方便的用来测试字符串和数组类型的长度是否满足预期

./src/utils/getIntArray.js

export const getIntArray = (num) => {
  if (!Number.isInteger(num)) {
    throw Error('"getIntArray"只接受整数类型的参数');
  }
  
  return [...new Array(num).keys()];
};

./test/getIntArray.test.js

./test/getIntArray.test.js
import { getIntArray }  from '../src/utils/getIntArray';

test('getIntArray(3)返回的数组长度应该为3', () => {
  expect(getIntArray(3)).toHaveLength(3);
})

.toThorw 能够让我们测试被测试方法是否按照预期抛出异常

但是需要注意的是:我们必须使用一个函数将被测试的函数做一个包装,正如下面 getIntArrayWrapFn 所做的那样,否则会因为函数抛出错误导致该断言失败。

./test/getIntArray.test.js
 

import { getIntArray }  from '../src/utils/getIntArray';

test('getIntArray(3.3)应该抛出错误', () => {
  function getIntArrayWrapFn() {
    getIntArray(3.3);
  }
  
  expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
})

.toMatch 传入一个正则表达式,它允许我们来进行字符串类型的正则匹配

./test/userInfo.test.js

import { getUserInfo }  from '../src/utils/userInfo.js';

test("getUserInfo().name 应该包含'mo'", () => {
  expect(getUserInfo().name).toMatch(/mo/i);
})

测试异步函数

./servers/fetchUser.js

/** 
 * 获取用户信息
*/
export const fetchUser = () => {
  return new Promise((resole) => {
    setTimeout(() => {
      resole({
        name: 'moji',
        age: 24,
      })
    }, 2000)
  })
}

./test/fetchUser.test.js

import { fetchUser } from '../src/fetchUser';

test('fetchUser() 可以请求到一个用户名字为 moji', async () => {
  const data =  await fetchUser();

  expect(data.name).toBe('moji')
})

这里你可能看到这样一条报错

图片

 这是因为 @babel/preset-env 不支持 async await 导致的,这时候就需要对 babel 配置进行增强,可以安装 @babel/plugin-transform-runtime 这个插件解决

npm install --save-dev @babel/plugin-transform-runtime

同时改写 .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

再次运行就不会出现报错了

图片

.toContain 匹配对象中是否包含

./test/toContain.test.js

const names = ['liam', 'jim', 'bart'];

test('匹配对象是否包含', () => {
  expect(names).toContain('jim');
})

检查一些特殊的值(null,undefined 和 boolean)

toBeNull 仅匹配 null
toBeUndefined 仅匹配 undefined
toBeDefined 与…相反 toBeUndefined
toBeTruthy 匹配 if 语句视为 true 的任何内容
toBeFalsy 匹配 if 语句视为 false 的任何内容

检查数字类型(number)
toBeGreaterThan 大于
toBeGreaterThanOrEqual 至少(大于等于)
toBeLessThan 小于
toBeLessThanOrEqual 最多(小于等于)
toBeCloseTo 用来匹配浮点数(带小数点的相等)

总结

以上就是文章全部内容,相信你阅读完这篇文章后,已经掌握了前端单元测试的基本知识,甚至可以按照文章教学步骤,现在就可以在你的项目中接入单元测试。同时在阅读过程中如果你有任何问题,或者有更好见解,更好的框架推荐,欢迎你在评论区留言!

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/560755.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于DDSRF正负序分离方法的不平衡电网PQ控制策略_平衡电流控制

0.前言 对于并网逆变器而言&#xff0c;电网会存在不平衡的情况。在这种情况下&#xff0c;不平衡的电网电压可以分解成为正序、负序和零序分量。并网逆变器通常期望能够实现单位功率因数并网&#xff0c;向电网注入对称的正弦电流&#xff0c;所以此时的微电网逆变器控制策略显…

DC-9靶机-简单谈一下端口敲门技术 (Port Knocking)

前言 在打靶机DC-9时&#xff0c;爆破SSH时一直显示失败&#xff0c;经过查阅才知道原来是对端口做了“隐藏”&#xff0c;需要通过 Port Knocking 来主动开启&#xff0c;由于平时接触到的机会不多&#xff0c;所以这里简单记录一下&#xff0c;加强一下印象&#xff0c;也希…

Systrace系列7 —— Vsync 解读

本文主要是是介绍 Android 中的 Vsync 机制。文章会从 Systrace 的角度来看 Android 系统如何基于 Vsync 每一帧的展示。Vsync 是 Systrace 中一个非常关键的机制,虽然我们在操作手机的时候看不见,摸不着,但是在 Systrace 中我们可以看到,Android 系统在 Vsync 信号的指引下…

Tomcat系统架构浅析

大家好&#xff0c;我是易安&#xff01; 今天咱们就来一步一步分析Tomcat的设计思路&#xff0c;看看Tomcat的设计者们是如何设计一个复杂系统&#xff0c;怎么设计顶层模块&#xff0c;以及模块之间的关系。 Tomcat总体架构 我们知道如果要设计一个系统&#xff0c;首先是要…

特征缩放(Scale Features)、特征缩放预测​CO2 值、df列索引扩展

目录 1、特征缩放 2、预测CO2 值 3、df列索引扩展 1、特征缩放 特征缩放可以用于不同的度量单位。度量单位不同的情况下&#xff0c;特征的数值大小也会有所不同&#xff0c;这可能会影响到某些机器学习算法的表现。例如&#xff0c;如果一个特征的单位是英寸&#xff0c;而另…

DAB-DETR代码学习笔记

先上一张整体架构图 &#xff1a; 代码地址&#xff1a;GitHub - IDEA-Research/DAB-DETR: [ICLR 2022] DAB-DETR: Dynamic Anchor Boxes are Better Queries for DETR 论文地址&#xff1a; https://arxiv.org/pdf/2201.12329.pdf 文章全名《DYNAMIC ANCHOR BOXES ARE BETTER …

建模杂谈系列223 Q-Learning示例的代码拆解分析

说明 找到了一个合适的例子&#xff0c;然后我对其中的内容进行了拆解分析。我觉得代码表达的内容比伪代码清晰多了。 这次算是补砖了(监督无监督强化)&#xff0c;过去实际上接触过很多强化体系内的基本工具&#xff0c;但一直没有开始做&#xff0c;部分原因是没时间&#…

Java 与排序算法(5):归并排序

一、归并排序 归并排序&#xff08;Merge Sort&#xff09;是一种基于分治思想的排序算法。它将待排序的数组分成两个长度相等的子数组&#xff0c;然后对这两个子数组分别进行归并排序&#xff0c;最后将两个排好序的子数组合并成一个有序的数组。 具体实现过程如下&#xf…

【国内chatgpt使用方法合集】(5月22日已更新)

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

Elasticsearch文档操作:初学者指南(2023年最新版包含DSL语句的使用和RestHighLevelClient在Java中的使用)

2023年还没有学习Elasticsearch?&#xff0c;那么您将错过最强大、最通用的编程语言之一。 本文将介绍在Elasticsearch对文档分别使用DSL语句和Java High Level REST ClientAPI来对文档进行操作。获取更多信息查看官网帮助文档 运行环境&#xff1a; Linux&#xff0c;docke…

驱动开发DAY6

非阻塞IO 在应用程序中读取硬件数据时&#xff0c;无论硬件数据是否准备完毕&#xff0c;read&#xff08;&#xff09;函数不会阻塞&#xff0c;继续向下执行 阻塞IO 当应用程序中读取硬件数据时&#xff0c;在硬件数据没有准备好时&#xff0c;进程会阻塞在read&#xff08;&…

C语言——如何写出好的代码?

哈喽&#xff0c;大家好&#xff0c;今天我们来学习如何才能写出优秀的代码&#xff0c;主要讲的是assert和const的用法。 首先&#xff0c;什么样的代码才算的上是优秀的代码呢&#xff1f;应该符合下面的要求&#xff1a; 1. 代码运行正常 2. bug很少 3. 效率高 4. 可读性高 …

自抗扰PID(梯形图源代码)

有关ADRC的详细算法和源代码,请参看专栏的系列文章,这里不再赘述,常用链接如下: ADRC自抗扰控制算法(含梯形图完整源代码和算法公式)_adrc算法_RXXW_Dor的博客-CSDN博客PLC的自抗扰控制(ADRC)算法_RXXW_Dor的博客-CSDN博客_adrc算法1、自抗扰控制算法,网上很多文章有所…

x210---根文件系统制作

一、busybox的移植 1.1、busybox源码下载 (1)busybox是一个开源项目&#xff0c;所以源代码可以直接从网上下载。 (2)busybox的版本差异不大&#xff0c;版本新旧无所谓。 (3)下载busybox可以去linuxidc等镜像网站&#xff0c;也可以去www.busybox.net官方网站下载。 1.2、修…

技术人如何写简历?(文末有福利)

前言 笔者在滴滴、阿里和字节时候也面试了不少人&#xff0c;看过形形色色的简历没有上百也有大几十份了。校招季也快到了&#xff0c;这里总结自身经验聊一下 技术人的简历如何去写面试官是怎么样从一份简历去开展后续的面试 简历的作用 简历是你向一家公司求职的“敲门砖…

数据结构学习之路-集合

集合Set 集合的特点集合的内部实现&#xff08;使用链表&#xff09;集合的内部实现&#xff08;使用红黑树&#xff09;复杂度分析使用红黑树实现集合的限制 集合的特点 不存放重复的元素常用于去重 例如&#xff1a;存放新增的IP地址&#xff0c;统计新增IP量&#xff1b;存…

torch中的model.eval()、model.train()详解

&#x1f468;‍&#x1f4bb;个人简介&#xff1a; 深度学习图像领域工作者 &#x1f389;工作总结链接&#xff1a;https://blog.csdn.net/qq_28949847/article/details/128552785 链接中主要是个人工作的总结&#xff0c;每个链接都是一些常用demo&#xff0c…

Laravel框架05:模型和自动验证

Laravel框架05&#xff1a;模型和自动验证 一、模型&#xff08;AR模式&#xff09;概述二、定义模型三、调用模型四、基本操作1. 添加数据① AR模式② Request 2. 查询数据3. 修改操作① AR模式② update 4. 删除操作 五、控制器验证1. 基本语法2. 输出错误信息 一、模型&…

今麦郎跻身“我最喜欢中国品牌”榜,致力领航中国品牌发展新范式

在中国经济探寻高质量发展的当下&#xff0c;中国民营企业肩负着推动经济发展的重任。在当前中国经济向上向前的大背景下&#xff0c;展示中国特色、传播中国文化、践行社会责任多位一体的高质量品牌越来越受到重视。但冰冻三尺非一日之功&#xff0c;唯有经历时间考验&#xf…

Spring:Spring 整合 MyBatis 的具体过程

文章目录 Spring&#xff1a;Day 04整合 MyBatis一、配置环境1. 导入依赖2. 准备一个数据库 二、用 Spring 整合 MyBatis1. 编写通用配置文件2. 编写实现类3. 编写 Spring 配置文件4. 测试5. 分析总结 三、拓展1. 实现2. 总结 四、事务1. 概述2. 没有事务时3. 声明式事务4. 总结…