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

airborne007 發布于2019-08-21 11:50 / 1891人閱讀

摘要：包包含由團隊提供的測試實用程序。將在一個名為的目錄中自動查找整個樹中的測試文件是的帶有下劃線。讓我們為時間軸組件創建第一個測試。其中之一是命令?，F在我們已經編寫了第一個測試并確認了我們的設置我們將在明天開始測試我們的時間軸組件。

本文轉載自：眾成翻譯
譯者：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庫中的快照功能?？煺帐且环NJest的方式, 可將呈現的輸出從虛擬 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的布爾值。

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

云服務器 GPU云服務器全棧性能測試 react實現輪播圖第7天:CSS入門 FCKeditor23

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87163.html

【全棧React】React 30天教程索引

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第24天: 測試應用

摘要：我們的第一個假設是非常簡單的測試。我們正在測試以確保元素被包裝在類中。在我們編寫的每個測試中我們都需要將應用呈現在工作測試文檔中。作為提醒我們可以使用命令或命令來運行測試。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...

ziwenxie 2019-08-21 11:50 評論0 收藏0
【全棧React】第22天: 測試簡介

摘要：我們將討論三種不同的軟件測試范例單元測試功能測試和集成測試。在中單元測試通常不需要瀏覽器可以快速運行不需要寫入斷言本身通常是簡單而簡潔的。集成測試最后我們將研究的最后一種測試是集成測試。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3809原文：https://www.fullstackreact.com/30-days-of...

qc1iu 2019-08-21 11:50 評論0 收藏0
【全棧React】第11天: 純組件

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。為了獲得更多的性能和簡單性，同樣允許我們使用正常的函數創建純粹的，無狀態的組件。在中，功能組件被稱為一個參數的類似于構造函數類，它們是它所調用的，以及組件樹的當前。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3819原文：https://www.fullstackrea...

Cciradih 2019-08-20 18:33 評論0 收藏0
【全棧React】第29天: 持續集成

摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們將介紹一些可持續的集成解決方案，為我們提供運行測試以及實施測試我們在云端的應用。我們已經啟動了一個測試套件但是現在我們要確保它在部署之前完全通過。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3801原文：https://www.fullstackreact.com/30-days-of...

xavier 2019-08-21 11:52 評論0 收藏0