单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如 C 语言中单元指一个函数,Java 里单元指一个类,图形化的软件中可以指一个窗口或一个菜单等。总的来说,单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。
认为前端代码都运行在浏览器里,如何做单元测试?!对于 Javascript 来讲,当然是可以进行单元测试的,并且也通常是针对函数、模块、对象进行测试。前端单元测试狂阶也有不少,比如 QUnit、Sinon、Mocha 等等,单元测试的执行环境可以是我们日常使用的浏览器 ie、Chrome 等,也可以是无界面浏览器比如 PhantomJS、Headless Chrome。
在前端的世界里,至少需要三类工具来进行单元测试:
测试管理工具
测试管理工具是用来组织和运行整个测试的工具,它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来,并运行被测试代码进行测试。我们经常使用Karma
测试框架
测是框架是单元测试的核心,它提供了单元测试所需的各种 API,你可以使用它们来对你的代码进行单元测试。我们使用Mocha
断言库
断言库提供了用于描述你的具体测试的 API,有了它们你的测试代码便能简单直接,也更为语义化,理想状态下你甚至可以让非开发人员来撰写单元测试。我们使用sinon-chai
可选工具包括:
测试浏览器
这个比较好理解,就是测试代码所执行的浏览器环境。我们使用 PhantomJS 或者Headless Chrome
测试覆盖率统计工具
我们使用和 Karma 配套的Karma-coverage
Vue 工程的单元测试如何做?
下面着重讲解 Vue 工程如何进行自动化的单元测试。本文讲解的是使用 Vue-cli 或者 bfe-cli 创建的工程如何使用。测试工具默认使用了上文的推荐工具。
首先在 /test/unit/specs/ 文件夹中增加一个测试案例文件,命名为 < 模块名称 >.spec.js。框架代码会自动扫描以.spec.js 结尾的文件当做测试案例进行执行。
假设我们有一个这样的组件MyComponent.vue:
这个组件有输入参数 message2、有方法、有输出,麻雀虽小五脏俱全,如何做单元测试呢?
// 导入工具方法
import {createTest, destroyVM} from ‘…/util’;
import MyComponent from ‘path/to/MyComponent.vue’
describe(‘MyComponment’, () => {
let vm = null;
// 每个案例执行完成后销毁组件实例
afterEach(() => {destroyVM(vm);
});
// 第一个案例,检查组件是否有 created 方法,has a created 是案例名称
it(‘has a created’, () => {expect(typeof MyComponent.created).toBe(‘function’);
})
// 检查 data 设置是否正确
it(‘sets the correct default data’ () => {expect(typeof MyComponent.data).toBe(‘function’)
const defaultData = MyComponent.data()
expect(defaultData.message).toBe(‘hello!’)
})
// 检查渲染后的组件状态
it(‘renders the correct message’, () => {vm = createTest(MyComponent);
expect(vm.KaTeX parse error: Expected 'EOF', got '}' at position 62: …qual('bye!') }̲) // 检查传参是否正确…el.querySelector(’.message2’).textContent).to.equal(‘test1’)
})
})
测试案例写好了,接下来我们来执行一下
$ npm run test
… 省略启动信息…
MyComponment.vue
✓ has a created
✓ sets the correct default data
✓ renders the correct message
✓ renders correctly with different props
PhantomJS 2.1.1 (Linux 0.0.0): Executed 4 of 4 SUCCESS (0.193 secs / 0.058 secs)
TOTAL: 4 SUCCESS
从结果可以看出,一共 4 个案例,成功执行 4 个,测试案例是使用 PhantomJS 无头浏览器执行的。同时,在 /test/unit/coverage/lcov-report/ 文件夹下可以找到测试报告,里面有详细的代码覆盖率情况,可以明确的看出哪些代码没有被测试到。下图为 bfe-ui 的测试报告。
[图片上传中…(image-504899-1542697571870-0)]
结合 Gitlab-CI 可以在工程每一次提交代码时进行一次单元测试,将所有案例自动执行一遍,并且给出测试报告,并将执行结果可视化的反馈在流水线上。
以上就是关于 Vue 工程如何做单元测试的全部内容。