Jest-使用笔记

Jest-使用笔记

What&Why

Jest是一个单元测试的工具，在vue上配合vue-test-utils我们可以更方便地去测试组件。测试组件的作用在于开发新功能为了确保不影响旧功能时自动化测试，前提是旧功能已经做过单元测试。

一般开发时间比较紧迫可能也不会耗时去写单元测试，毕竟要达到覆盖率还是需要一定的时间的。

Installation

在项目新建时勾选单元测试，选择用jest。或在vue ui安装也可。

vue add unit-test

Brief Guide

1. 新建spec.js文件

在根目录下的自动生成的tests/unit中新建.spec.js的文件，一般测试什么组件就写什么名字。

2. 编写测试文件

Jest 的常用方法

• describe(name, fn) 将一系列相关的测试放在一起。
• test(name, fn, timeout) 一个单独的测试
• it(name, fn, timeout) test方法的别名
• expect(value) 期望值是什么，配合.toBe(value)等方法使用
• .toBe() 期望值等于什么，类似==
• .toEqual()期望值等同什么，类似===
• toBeTruthy() toBeFalsy() 期望值等于真或假

vue-test-utils常用方法

注意，vue中传props是一个异步行为，所以要加入async/await来测试，如：it('name', async () => {})

• mount(Component, options) 用于将组件挂载，option中可传props，slot等参数。

  shallowMount(Component, options) 将组件浅挂载，即组件的子组件不继续挂载，提高性能。

  mount以后返回一个wrapper对象。

• wrapper.find(selector) 在wrapper里面找HtmlElement。

• wrapper.findComponent(Component) 在wrapper里面找Component

• wrapper.props(key) 直接返回一个prop，如：wrapper.props('onChange')('123')

• wrapper.exist() 检查一个组件或元素是否存在，返回一个布尔值

3. 测试命令

npm run test:unit
npm run test:unit -- --coverage

运行-- --coverage后根目录也会生成一个coverage文件夹，可视化的覆盖率数据。

覆盖率指标简述

%stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？

%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？

%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？

%Lines行覆盖率（line coverage）：是不是每一行都执行了？