前端自動化測試jest教程1-配置安裝

前言

前端早已不在是簡單的切圖仔，web前端工程師也在逐漸淡出江湖。大前端的時代早已來臨，面對日新月異的技術我們只能不斷學習，逐個點亮技能點。

現在隨處可見的單元測試，在主流框架以及UI組件中都可以見到，單元測試的優勢就不言而喻了。本系列文章將帶你學習前端自動化測試 jest框架 ，包括基本的配置、jest匹配器、異步代碼測試、鉤子函數、mock以及在vue項目中的實際應用等等，如果想繼續學習後面文章，請關注我，後面會不斷寫完整個jest的教程

爲什麼選擇jest？

• 零配置：在大部分項目中都可以實現開箱即用，無需配置
• 速度快：根據文件的修改進行測試，不會每次測試全部實例
• 快照功能：能夠進行簡單快速的測試
• 隔離性好：不同的測試文件環境獨立，不會相互影響
• api簡單
• mock豐富
• 等等

基本安裝配置

1. 創建demo文件夾
2. 進入文件夾中運行npm init 初始化一個package.json文件
3. 安裝jest npm install --save-dev jest
4. 在demo文件夾中新建兩個文件index.js index.test.js
   
5. 在index.js中寫入代碼

function sum(a, b) {
  return a + b
}

module.exports = sum

效果圖：

6. 在index.test.js中寫入代碼（不懂沒關係，後面會講到）

const sum = require('./index')

test('測試 sum', () => {
  expect(sum(1, 2)).toBe(3)
})

效果圖：

7. 在package.json中的script加入以下命令

效果圖：

最後運行npm run test 即可，出現下面這樣，就表示基本配置完成

不知道你們有沒有發現，上面的模塊導出和導入都是使用commonjs的規範，在node環境中是沒有問題的，但是實際開發中我們的代碼是運行在瀏覽器端的。因此我們需要轉換成瀏覽器能夠識別的ES6模塊方法,本身jest是不支持ES6的模塊方法，我們可以借用babel來實現

使用babel讓jest支持ES6模塊導入導出

1. 安裝babel模塊 npm install --save-dev @babel/core @babel/preset-env
2. 在demo文件夾下新建一個.babelrc，並寫入以下代碼

{
  "presets":[
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

這段babel配置意思是，根據當前node環境，自動將語法轉換成commonjs的語法

注： 當你運行npm run jest的時候，jest內部有個babel-jest模塊會檢測是否有babel，如果有就去加載babel配置文件，然後再去測試經過babel轉化後的代碼

3. 將index.js和index.test.js內的導入導出模塊代碼改寫成es6語法

改後的效果圖：

4. 運行npm run test，即可看見測試成功的提示

到目前爲止，我們已經完成的將jest的運行環境搭建起來，併成功的支持了es6的模塊語法，後面的教程基本上都是以demo的目錄結構爲基礎，進行一些api的講解，大家有興趣學習後面的可以將文件保存好以備後面的教程練習

下一節，我將介紹上面我們寫的代碼作用，以及重點jest中匹配器部分，jest的匹配器有非常多，我這裏只介紹部分在項目中會常用到的匹配器。

本人能力有限，文章可能會有不正確或者不恰當的部分，希望你可以指出

關注公衆號，和我一起學習前端必備技能，前端自動化測試jest