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

46次阅读

共计 2097 个字符,预计需要花费 6 分钟才能阅读完成。

前言

在咱们开发完一个组件库的后,在做单元测试时,代码覆盖率经常被拿来作为掂量测试好坏的指标,甚至,用代码覆盖率来考核测试工作实现状况,比方,代码覆盖率必须达到 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. 自动检测,能够做到一次编写,屡次运行,节俭反复测试的工夫

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

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

正文完
 0