个人博客

前端Vue单元测试入门 ​

https://juejin.cn/post/7030781955494903844?searchId=20230807192651EECFDBEAFB046614E73E

为什么需要单元测试 ​

单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等。单元测试的作用有以下：

  • 正确性：可以验证代码的正确性，为上线前做更详细的准备；
  • 自动化： 测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；
  • 解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；
  • 驱动开发、指导设计：提前写好的单元测试能够指导开发的API设计，也能够提前发现设计中的问题；
  • 保证重构：测试用例可以多次验证，当需要回归测试时能够节省大量时间。

如何写单元测试 ​

测试原则 ​

  • 测试代码时，只考虑测试，不考虑内部实现；
  • 数据尽量模拟现实，越靠近现实越好；
  • 充分考虑数据的边界条件；
  • 对重点、复杂、核心代码，重点测试；
  • 测试、功能开发相结合，有利于设计和代码重构。

编写步骤 ​

1.准备阶段：构造参数，创建spy等； 2.执行阶段：用构造好的参数执行被测试代码； 3.断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常； 4.清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的spy等。

测试工具 ​

单元测试的工具可分为三类：

  • 测试运行器：可以模拟各种浏览器环境，自定义配置测试框架和断言库等，如Karma
  • 测试框架：提供单元测试的功能模块，常见的框架有Jest、mocha、Jasmine、QUnit；
  • 工具库：assert、should.js、expect.js、chai.js等断言库，enzyme渲染库，lstanbul覆盖率计算。

Jest比较常用。Jest功能全面，集成了各种工具，且配置简单，甚至零配置直接使用。

Jest ​

安装 ​

yarn add --dev jest
# or
# npm install -D jest

简单示例 ​

创建文件sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

创建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"
  }
}

最后，运行 yarn test 或 npm run test ，Jest将打印下面这个消息：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

至此 完成了一个基本的单元测试。

注意：Jest 通过用 JSDOM 在 Node 虚拟浏览器环境模拟真实浏览器，由于是用 js 模拟 DOM, 所以 Jest 无法测试样式 。Jest 测试运行器自动设置了 JSDOM。