关于前端:单元测试即刻搞定

前言

明天你胃口好吗？

现在随着一个我的项目业务一直壮大，重构与迭代也日趋频繁，为保障我的项目的稳定性与可维护性，单元测试也逐步成为不可漠视的一环。本文将带来单元测试的介绍，无关框架抉择，环境装置与书写测试用例等，内容较为简单，极易上手。

什么是单元测试

在计算机编程中，单元测试（Unit Testing）又称为模块测试，是针对程序模块（软件设计的最小单元）来进行正确性测验的测试工作。程序单元是利用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是办法，包含基类（超类）、抽象类或者派生类（子类）中的办法。

以上是来自维基百科的解释。概括来说，单元测试是对软件中的最小可测试单元进行检查和验证。而对于 JavaScript 来说，通常也是针对函数、对象和模块的测试。

为什么要应用它

长处

• 释怀重构：重构某处业务代码过程中不必放心代码带来的副作用，用例会主动帮忙全面测试;
• 利于保护：每次迭代新性能，代码更新频繁时，保障了测试的完整性（因为之前的测试用例仍然存在），零碎有很好的可维护性，便于多人开发;
• 疾速相熟代码：对团队的新人来说，单元测试其实是较好的文档，每个 case 都能具体地反映代码蕴含的具体性能和业务;
• 进步代码品质：假如一个单元测试写得逻辑非常复杂，或者说一个函数简单到无奈写单元测试，那就阐明模块抽取有问题，可警示本人。

前端支流测试框架

断言概念：就是判断源码的理论执行后果与预期后果是否统一，若不统一即抛出异样。

出名团队应用 Jest 状况

前端如何抉择适合的框架

我的项目需要

• 与我的项目、编译器都需较好地兼容
• 测试疾速执行
• 清晰的错误报告

老本

• 学习老本
• 调试保护老本

相比其余框架而言，Jest 比拟新，本着看待技术须要有「喜新厌旧」的精力，另外联合本身需要，百瓶前端团队应用了 Jest，联合了 Vue Test Utils 组件测试框架。性能较齐全，简略易用。另外 Vue 官方网站对 Jest 的评估是：性能最全的测试运行器。

tips：如果写了 Mocha 的测试用例，但想迁徙至 Jest 框架中，可应用 jest-codemods 进行无缝迁徙。

撸起袖子，轻松上手

Talk is cheap，show you the code！即刻开始搭建环境。

存在一个脚手架生成的 Vue 我的项目（若还未生成 Vue 我的项目可在创立 Vue 我的项目时候抉择手动配置内容，在手动配置中增加 Jest 测试框架与 Vue Test Utils 工具库）。

Jest 装置

办法一：

1. 首先装置 Jest，进入我的项目目录输出命令。

npm install --save-dev jest

2. 装置 Jest 相干依赖。

npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、babel-core、regenerator-runtime、babel-preset-env 装置目标是为应用 ES6 语法进行单元测试。因为 ES6 中 import 的应用在 Jest 并不反对。

3. 增加 .bablerc 文件

{
  "presets": [
    [
      "env",
      {"modules": false}
    ]
  ],
  "env": {
    "test": {
      "presets": ["env"]
    }
  }
}

4. 建设 jest.conf.js 文件，进行配置

module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
  ],
  // 通知 Jest 解决 `*.vue` 文件
  moduleNameMapper: {
    // 反对源代码中雷同的 `@` => `src` 别名
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    // 用 babel-jest 解决 js
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    // 用 vue-jest 解决 `*.vue` 文件 
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  }
}

5. 增加 test、script 命令，在 package.json 中增加测试单元的脚本

{
  'script': {'test': 'jest'}
} 

其中 test 的命令能够进行优化

"test": "jest --config jest.conf.js --coverage --watch"

• --coverage 能够生成覆盖率报告
• --watch 实现单元测试监听，测试用例批改时无需再进行命令行运行，可自行监听
• --config jest.conf.js 是为了解决测试 Vue 组件时候，无奈找到组件模块

办法二：

应用命令行 npx jest --init 运行。

1. 装置 Vue Test Utils 与 vue-jest 预处理器。

npm install --save-dev jest @vue/test-utils

2. 为通知 Jest 如何解决 *.vue 组件文件，咱们须要装置和配置 vue-jest 预处理器：

npm install --save-dev vue-jest

最简配置如下，即可进行单元测试：

留神：

如果你应用了 Babel 7 或更高版本，你须要在你的 devDependencies 里增加 babel-bridge。

npm install --save-dev babel-core@^7.0.0-bridge.0

装置实现后，建设 test 文件夹，学习官网的 API 进行测试用例应用。

在此文件夹中建设 .js 并引入咱们须要测试的函数add：

运行命令npm run jest

至此我的项目中根底的单元测试装置与应用曾经实现。

最初

值得思考的是，并不是所有的我的项目都值得引入测试框架，毕竟保护测试用例也是须要老本的。对于一些需要频繁变更、复用性较低的内容而言是极为不适合。以下三种状况是较为适合的

1. 须要长期保护的我的项目，因为他们须要性能的稳定性；
2. 较为稳固的我的项目或者我的项目中较为稳固的局部；
3. 被屡次复用的中央，比方通用的组件和库函数。

对于前端单元测试应用的简略介绍就完结了，心愿本文对你有帮忙，祝你天天好胃口！

参考

1. 「Jest 官方网站」https://www.jestjs.cn/docs/ge…
2. 「Mocha 官方网站」https://mochajs.org/
3. 「Vue Test Utils 应用」https://vue-test-utils.vuejs….
4. 「Jest + Vue Test Utils 官网应用」https://vue-test-utils.vuejs….

更多精彩请关注咱们的公众号「百瓶技术」，有不定期福利呦！