【全棧React】第23天: 實現測試

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3807
原文：https://www.fullstackreact.com/30-days-of-react/day-23/

昨天咱們檢查了咱們在React中寫的不一樣類型的測試。今天咱們親自動手來看看結果。咱們將安裝設置測試所需的依賴關係以及寫入咱們的第一個斷言。

讓咱們把咱們的應用設置起來進行測試。由於咱們將使用幾個不一樣的庫, 因此咱們須要在使用它們以前安裝它們 (固然)。

依賴關係

咱們將使用下面的npm 庫:

jest/jest-cli

是 Facebook 發佈的官方測試框架, 是測試React應用的絕佳測試框架。它很是快, 提供沙盒測試環境, 支持快照測試, 等等。

babel-jest/babel-preset-stage-0

咱們將使用階段 0 (或 ES6-edge 功能) 編寫測試, 所以咱們但願確保咱們的測試框架可以讀取和處理咱們的測試和源文件中的 ES6。

sinon

Sinon是一個測試實用程序庫, 它爲咱們提供了一種編寫間諜(spies)、存根(stubs)和 模擬(mock) 的方法。咱們將在須要時討論這些內容, 但如今咱們將安裝該庫。

react-addons-test-utils/enzyme

react-addons-test-utils 包包含由React團隊提供的測試實用程序。

Enzyme是由 Airbnb 構建/維護的 更易於使用的JavaScript 測試庫,而且提供了遍歷/操縱響應的虛擬 DOM 輸出的很是好的方法。當咱們開始使用react-addons-test-utils, 咱們將過渡到使用Enzyme, 咱們更喜歡在咱們的測試中使用它。

react-test-renderer

react-test-renderer 庫容許咱們使用jest庫中的快照功能。快照是一種Jest的方式, 可將呈現的輸出從虛擬 DOM 序列化爲一個文件, 咱們能夠從一個測試自動進行比較。

redux-mock-store

redux-mock-store庫容許咱們輕鬆地製做一個再現存儲進行測試。咱們將使用它來測試咱們的動做創建立者, 中間件, 和咱們的歸併器。

To install all of these libraries, we'll use the following npm command in the terminal while in the root directory of our projects:要安裝全部這些庫, 咱們將在項目的根目錄中使用終端中的npm 命令:

yarn add --dev babel-jest babel-preset-stage-0 enzyme jest-cli react-addons-test-utils react-test-renderer redux-mock-store sinon

配置

咱們還須要配置咱們的安裝程序。首先, 讓咱們添加一個 npm 腳本, 它將容許咱們使用npm test 命令運行測試。在咱們的項目根目錄的package.json 文件, 讓咱們添加test 腳本。在package.json文件中查找腳本鍵, 而後添加test 命令, 以下所示:

{
  // ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test --env=jsdom"
  },
}

編寫測試

讓咱們確認咱們的測試設置工做正常。Jest將在一個名爲__tests__ 的目錄中自動查找整個樹中的測試文件 (是的, 帶有下劃線)。讓咱們在咱們的src/components/Timeline 目錄中建立咱們的第一個__tests__ 目錄, 並建立咱們的第一個測試文件:

mkdir src/components/Timeline/__tests__
touch src/components/Timeline/__tests__/Timeline-test.js

Timeline-test.js文件將包括咱們的Timeline組件的全部測試 (如文件名所示)。讓咱們爲時間軸組件建立第一個測試。

咱們將使用 Jasmine框架編寫測試。Jasmine提供了一些方法, 咱們將使用至關多的一些方法。如下兩種方法都接受兩個參數, 第一種是描述字符串, 第二個是要執行的函數:

• describe()

• it()

describe() 函數爲咱們提供了一種將測試組合成邏輯包的方法。因爲咱們正在爲咱們的Timeline編寫一組測試, 咱們將在測試中使用describe() 函數來指示咱們正在測試時間軸。

在src/components/Timeline/__tests__/Timeline-test.js文件中, 讓咱們添加描述塊:

describe('Timeline', () => {

});

咱們可使用it() 函數添加第一個測試。it() 函數是咱們將設定預期的位置。讓咱們用咱們的第一個指望, 一個經過和一個失敗來設置咱們的測試, 這樣咱們能夠看到輸出的差別。

In the same file, let's add two tests:在同一個文件中, 讓咱們添加兩個測試:

describe('Timeline', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

咱們將看看可能的指望, 咱們能夠設定在一個時刻。首先, 讓咱們運行咱們的測試。

執行測試

create-react-app 包 使用Jest自動爲咱們創建了一個質量測試環境,。咱們可使用yarn test或npm test腳本執行測試。

在終端中, 讓咱們執行咱們的測試:

yarn test

從這個輸出, 咱們能夠看到兩個測試, 一個經過測試 (帶有一個綠色的複選標記) 和一個失敗的測試 (還有一個紅色的 x 和失敗的描述)。

讓咱們更新第二個測試, 使它經過將指望更改成toBeFalsy():

describe('Timeline', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

從新運行測試, 咱們能夠看到咱們有兩個經過測試

`yarn test`

指望

在默認狀況下, Jest在測試中提供了一些全局命令 (即不必要求的內容)。其中之一是expect() 命令。expect() 命令有幾個指望, 咱們能夠調用它, 包括咱們已經使用的兩個:

• toBeTruthy()

• toBeFalsy()

• toBe()

• toEqual()

• toBeDefined()

• toBeCalled()

• etc.

在如下的 jest頁面中能夠得到一整套指望:https://facebook.github.io/jest/docs/api.html#writing-assertions-with-expect.

expect() 函數採用單個參數: 返回要測試的值函數的返回值。例如, 咱們已經寫好的兩個測試經過了true 和false的布爾值。

如今咱們已經編寫了第一個測試並確認了咱們的設置, 咱們將在明天開始測試咱們的時間軸組件。今天的工做很好, 明天見!