尝鲜Vue3之四：如何运行Jest单元测试

时间 2019-11-08

标签尝鲜 vue3 vue 之四如何运行 jest 单元测试繁體版

原文原文链接

总之目前来说JS界Jest是一套比较成体系的测试工具。为何这么说呢好比拿之前的测试框架Mocha对比他只是一个测试框架，若是你须要断言还须要专门的断言库好比assert shoud expect等等若是须要Mock还须要住啊们的库来支持很不方便。不过Jest基本上能够一次性搞定。npm

目录文件名约定

Jest测试代码和逻辑代码是听从约定优于配置（convention over configuration）其实这个也是目前编程世界广泛接受的原则。编程

Jest的测试代码是基于如下约定json

测试文件名要以spec结果
测试文件后缀为js，jsx，ts，tsx
测试文件须要放在tests/unit/目录下或者是/tests/目录下只要知足这三个要求的测试文件，使用运行jest时就会自动执行。

其实这个规定相似于Maven对于测试代码和逻辑代码的约定只是test目录换成了__tests__浏览器

下面咱们具体看一下Vue3源码的目录结构bash

其实逻辑代码和测试代码对应放置仍是很方便的咱们再看看另一个reactive这个包框架

运行全量测试

package.json文件中已经配置好了jest 函数

npm run test
复制代码

覆盖率

咱们增长一个参数把覆盖率跑出来

npx jest --coverage 
复制代码

实际上跑覆盖率的时候是有错的咱们先不去管他咱们先解析一下这个报告怎么看，若是你们学过软件工程会知道通常从理论上讲覆盖率包括

语句覆盖
节点覆盖
路径覆盖
条件组合覆盖

可是通常来说不一样框架理解不同在Jest这里大概是这样分解的

%stmts是语句覆盖率（statement coverage）：是否是每一个语句都执行了？
%Branch分支覆盖率（branch coverage）：是否是每一个if代码块都执行了？
%Funcs函数覆盖率（function coverage）：是否是每一个函数都调用了？
%Lines行覆盖率（line coverage）：是否是每一行都执行了？

单独运行一个测试

好比咱们看看vue的index这个测试

有两种方法进行单独测试

// 全局安装
npm i jest -g
jest index

// 或者更更简便一点
npx jest index
复制代码

index.spec.ts

import { createApp } from '../src'

it('should support on-the-fly template compilation', () => {
  const container = document.createElement('div')
  const App = {
    template: `{{ count }}`,
    data() {
      return {
        count: 0
      }
    }
  }
  createApp().mount(App, container)
  // 断言 
  expect(container.innerHTML).toBe(`0`)
})
复制代码

声明中说为了确认模板编译能够生效，这个就是一个简单的数据绑定最后断言也是看了一下 count是否为 0 这个例子其实除了断言部分其实直接拷贝到第一次讲的那个html文件里面是能够运行的。

响应式Reactive的单元测试

看一下每一个包对应的测试代码都放在__tests__文件件中

npx jest reactive --coverage
复制代码

好了后面咱们就能够开始向源码进军了

尝鲜Vue3之四：如何运行Jest单元测试

目录

Jest简介

目录文件名约定

运行全量测试

覆盖率

单独运行一个测试

响应式Reactive的单元测试

目录