React單元測試：Jest + Enzyme（一）

前言

前端的單元測試在不少人看來都是一個無關緊要的東西，理由通常有下面幾條（如下內容統一稱單元測試爲單測）：

• 寫單測比較費時，有這個時間不如多作幾個需求
• 測試在驗收的時候對頁面的功能都會操做一遍，寫單測至關於作無用功
• 後端提供給前端的接口須要保證質量，所以須要作單測，但前端不多須要提供接口給其餘人

其實，我大致上是贊成以上觀點的。在大部分的狀況下，若是公司的業務不復雜，是徹底不必作單測的。但若是涉及到如下幾個方面，你就要考慮是否有必要引入單測了：

• 業務比較複雜，前端參與的人員超過3人
• 公司很是注重代碼質量，想盡一切辦法杜絕線上出bug
• 你是跨項目組件的提供方
• 你在作一個開源項目

React項目如何作單測

目前比較流行的React單測組合是Jest+Enzyme，下面咱們先對它們作一個簡單的瞭解。

Jest是Facebook開發的一個測試框架，它集成了測試執行器、斷言庫、spy、mock、snapshot和測試覆蓋率報告等功能。React項目自己也是使用Jest進行單測的，所以它們倆的契合度至關高。

Enzyme是由airbnb開發的React單測工具。它擴展了React的TestUtils並經過支持相似jQuery的find語法能夠很方便的對render出來的結果作各類斷言。

這將會是一個系列教程，做爲教程的第一篇，咱們先定一個小目標：將Jest應用到已有的React項目中並跑一個簡單的單測（假設打包工具爲webpack）。

Jest的安裝與配置

npm install --save-dev jest jest-cli babel-jest

其中，babel-jest的做用是讓單測代碼支持ES6。安裝完後，在項目的根目錄新建__jest__文件夾和__tests__文件夾，此時__mocks__文件夾咱們暫時無論，以下圖所示：

mudules文件夾將存放各個模塊的單測代碼，而utils文件夾裏面是對一些公用的函數寫的測試代碼。

因爲個人項目使用webpack做爲打包工具，因而我在package.json裏面作了如下的配置：

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__jest__/__mocks__/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy",
      "^cpn(.*)$": "<rootDir>/src/components$1"
    }
  }

moduleFileExtensions對應webpack中的extensions；moduleDirectories對應webpack中的modulesDirectories；moduleNameMapper對應webpack中的alias。這裏的<rootDir>對應咱們項目的根目錄。

對於多媒體文件(jpg/png等)，咱們能夠簡單的手動mock一下：

// <rootDir>/__jest__/__mocks__/fileMock.js
module.exports = 'test-file-stub';

對於css和scss文件，咱們使用identity-obj-proxy來mock，它會在引用到class的地方直接返回class的類名：

npm install --save-dev identity-obj-proxy

剩下的只是對一些簡寫路徑的配置。

更詳細的說明能夠看這裏。

至此，Jest已經安裝配置完畢。爲了驗證安裝配置是否成功，咱們寫一個簡單的測試代碼：

import {add} from 'common/utils/math.js'

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

同時，在package.json文件中，加入如下script：

"scripts": {
    "test": "jest __jest__/__tests__"
  }

此時在命令行輸入npm run test，出現如下結果，說明Jes安裝成功並經過第一個測試：

總結

按照上面說的步驟，若是一切順利，你的第一個單測用例應該成功跑起來了！咱們來回顧下咱們都作了些什麼：

• 安裝Jest並讓其支持ES6語法
• 新建對應的單測文件夾並新建一個單測文件
• 針對項目的webpack作相應的Jest配置
• 配置運行測試腳本

萬事開頭難，你已經踏出萬里長征的第一步了！在下一篇文章中，我將會詳細介紹如何使用Jest來mock方法和數據，敬請期待。