乐趣区

关于前端:如何做组件库的单元测试

jiezi

前言

在咱们开发完一个组件库的后，在做单元测试时，代码覆盖率经常被拿来作为掂量测试好坏的指标，甚至，用代码覆盖率来考核测试工作实现状况，比方，代码覆盖率必须达到 80%或 90%。于是乎，测试人员费尽心思设计案例笼罩代码。用代码覆盖率来掂量，无利也有有弊。

首先，让咱们先来理解一下所谓的“代码覆盖率”。我找来了所谓的定义：

代码覆盖率 = 代码的笼罩水平，一种度量形式。

对于如何开发组件库，可看这篇：

如何基于 vue 开发 ui 组件库（heaven-ui）

单元测试

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

须要留神以下几种状况：

  1. 须要拜访数据库的测试不叫单元测试；
  2. 须要拜访网络的测试不叫单元测试；
  3. 须要拜访文件系统的测试不叫单元测试。

尽管编写单元测试的过程很繁琐，但不得不说，它对于咱们的组件的迭代有很大的帮忙。

比方写单元测试的时候，常常会产生输入后果不合乎你预期的后果，这时你就得从新扫视你的代码了。

组件库中每一个组件都可能会重构或者更新迭代，如果单元测试覆盖率高的话，批改代码之后就越可能会发现潜在的问题。比方某些性能代码不小心删掉了。这样会导致用户更新最新版本时，短少了之前应用过的性能，产生一些纳闷。

技术选型

单元测试用到的工具大抵分为三局部：别离为管理工具、测试框架、断言库。

测试框架市面上有很多种，罕用的测试框架有以下几种：

  • Jasmine：Behavior-Drive development(BDD) 格调的测试框架，在业内较为风行, 性能很全面，自带 asssert、mock 性能
  • Qunit：该框架诞生之初是为了 jquery 的单元测试，起初独立进去不再依赖于 jquery 自身，然而其身上还是脱离不开 jquery 的影子
  • Mocha：Mocha 是一个功能丰富的前端测试框架。所谓 ” 测试框架 ”，就是运行测试的工具。通过它，能够为 JavaScript 利用增加测试用例，从而保障代码的品质。Mocha 既能够基于 Node.js 环境运行也能够在浏览器环境运行。
  • Jest：来自于 facebook 出品的通用测试框架，Jest 是一个令人欢快的 JavaScript 测试框架，专一于简洁明快。他实用但不局限于应用以下技术的我的项目：Babel, TypeScript, Node, React, Angular, Vue

这里 我选用的是 Karma、Mocha 和 Chai，接下来简略介绍一下我应用的（Karma）管理工具和（Chai）断言库

  • Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具，又称 Test Runner。罕用的管理工具还有 Jest 等。
  • Chai 是一个断言库，相似于 Node 的内置断言。通过提供许多能够针对代码运行的断言，它使测试变得更加容易。
  • Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具，又称 Test Runner。罕用的管理工具还有 Jest 等。
  • Chai 是一个断言库，相似于 Node 的内置断言。通过提供许多能够针对代码运行的断言，它使测试变得更加容易。

编写测试用例

组件库开发调试实现后，咱们须要编写每个组件对应的单元测试，以达到 100% 的覆盖率为⽬标。

我在组件库中抉择的是 karma, 目录构造如下：

spec 目录就是对应组件的单元测试用例了

以 button 为例：

test/specs/Button.spec.js

import Vue from 'vue'
import Button from '@/components/button'

describe('button.vue', () => {it('button 是否存在',()=>{expect(Button).to.be.ok;
  })
  it('测试 name 是否失效', () => {const Constructor = Vue.extend(Button)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

执行上述的单元测试代码，就能证实这段代码的行为输入的后果，是否和咱们冀望的统一。

为什么要做单元测试

为达到 100% 的覆盖率，咱们必须尽快能的笼罩所有场景。不得不说，编写测试用例比拟繁琐，但咱们又为什么要做这繁琐的工作呢？

因为单元测试蕴含以下长处：

  1. 可能会测出性能的暗藏 bug
  2. 保障代码重构的安全性。
  3. 组件库中每⼀个组件都可能会重构或者更新迭代，如果单元测试覆盖率⾼的话，批改代码之后就越可能会发现潜在的问题。⽐如版本升级后，导致某局部性能的缺失。
  4. 自动检测，能够做到一次编写，屡次运行，节俭反复测试的工夫

所以对于当初的组件库我的项目我的项目，可能被后续的开发者了解并且参照着持续保护上来，那么单元测试是十分必要的。

原文链接：
如何做组件库的单元测试

退出移动版