嚐鮮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的單元測試

目錄