xqh-vue-ui

# 单元测试

# 什么是单元测试？

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

# 为什么需要单元测试？

  • 可能会测出功能的隐藏bug。
  • 保证代码重构的安全性。
    • 组件库中每⼀个组件都可能会重构或者更新迭代，如果单元测试覆盖率⾼的话，修改代码之后就越可能会发现潜在的问题。⽐如版本升级后，导致某部分功能的缺失。
  • 自动检测，可以做到一次编写，多次运行，节省重复测试的时间

# 技术选型

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

本文选用Karma、Mocha和Chai。

  • Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具，又称 Test Runner。常用的管理工具还有 Jest 等。

  • Mocha 是一个功能丰富的前端测试框架。所谓"测试框架"，就是运行测试的工具。通过它，可以为 JavaScript 应用添加测试用例，从而保证代码的质量。Mocha 既可以基于 Node.js 环境运行也可以在浏览器环境运行。常用的测试框架还有 Asmine 、 Jasmine 等。

  • Chai 是一个断言库，类似于 Node 的内置断言。通过提供许多可以针对代码运行的断言，它使测试变得更加容易。

# Karma

# Mocha/chai/Sinon

  • 作用：提供测试语法

  • Mocha：describe，it 语法

  • chai：expect 语法

  • Sinon/Sinon-Chai：为组件的事件测试设置回调函数

# 目录结构

|-- tests
    |-- unit
        |-- specs
        		|-- xxx.spec.js
        |-- karma.conf.js
        |-- index.js

# 测试对象

  • 测DOM元素是否存在
  • 测props是否接受
  • 测事件
  • CSS不测

# 关于异步

由于DOM元素的渲染是异步的，所以我们往往需要在设置 PropsData 后异步地测试DOM元素情况

it('toast 接受 autoClose　属性', (done) => {
    const wrapper = mount(Toast, {
        propsData: {
            autoClose: 1
        },
    })
    // 确保在vm.execAutoClose执行后再去判断vm.$el是否被移出document.body
    setTimeout(() => {
        // 判断vm.$el是否被移出document.body
        expect(document.body.contains(wrapper.element)).to.equal(false)
        done()
    }, wrapper.props('autoClose') * 1000)
})

← 文档搭建 →