【全棧React】第23天: 實(shí)現(xiàn)測(cè)試

airborne007 發(fā)布于2019-08-21 11:50 / 1885人閱讀

摘要：包包含由團(tuán)隊(duì)提供的測(cè)試實(shí)用程序。將在一個(gè)名為的目錄中自動(dòng)查找整個(gè)樹中的測(cè)試文件是的帶有下劃線。讓我們?yōu)闀r(shí)間軸組件創(chuàng)建第一個(gè)測(cè)試。其中之一是命令。現(xiàn)在我們已經(jīng)編寫了第一個(gè)測(cè)試并確認(rèn)了我們的設(shè)置我們將在明天開始測(cè)試我們的時(shí)間軸組件。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3807
原文：https://www.fullstackreact.com/30-days-of-react/day-23/

昨天我們檢查了我們?cè)赗eact中寫的不同類型的測(cè)試。今天我們親自動(dòng)手來看看結(jié)果。我們將安裝設(shè)置測(cè)試所需的依賴關(guān)系以及寫入我們的第一個(gè)斷言。

讓我們把我們的應(yīng)用設(shè)置起來進(jìn)行測(cè)試。因?yàn)槲覀儗⑹褂脦讉€(gè)不同的庫, 所以我們需要在使用它們之前安裝它們 (當(dāng)然)。

依賴關(guān)系

我們將使用下面的npm 庫:

jest/jest-cli

是 Facebook 發(fā)布的官方測(cè)試框架, 是測(cè)試React應(yīng)用的絕佳測(cè)試框架。它非常快, 提供沙盒測(cè)試環(huán)境, 支持快照測(cè)試, 等等。

babel-jest/babel-preset-stage-0

我們將使用階段 0 (或 ES6-edge 功能) 編寫測(cè)試, 因此我們希望確保我們的測(cè)試框架能夠讀取和處理我們的測(cè)試和源文件中的 ES6。

sinon

Sinon是一個(gè)測(cè)試實(shí)用程序庫, 它為我們提供了一種編寫間諜(spies)、存根(stubs)和模擬(mock) 的方法。我們將在需要時(shí)討論這些內(nèi)容, 但現(xiàn)在我們將安裝該庫。

react-addons-test-utils/enzyme

react-addons-test-utils 包包含由React團(tuán)隊(duì)提供的測(cè)試實(shí)用程序。

Enzyme是由 Airbnb 構(gòu)建/維護(hù)的更易于使用的JavaScript 測(cè)試庫,并且提供了遍歷/操縱響應(yīng)的虛擬 DOM 輸出的非常好的方法。當(dāng)我們開始使用react-addons-test-utils, 我們將過渡到使用Enzyme, 我們更喜歡在我們的測(cè)試中使用它。

react-test-renderer

react-test-renderer 庫允許我們使用jest庫中的快照功能。快照是一種Jest的方式, 可將呈現(xiàn)的輸出從虛擬 DOM 序列化為一個(gè)文件, 我們可以從一個(gè)測(cè)試自動(dòng)進(jìn)行比較。

redux-mock-store

redux-mock-store庫允許我們輕松地制作一個(gè)再現(xiàn)存儲(chǔ)進(jìn)行測(cè)試。我們將使用它來測(cè)試我們的動(dòng)作創(chuàng)創(chuàng)建者, 中間件, 和我們的歸并器。

To install all of these libraries, we"ll use the following npm command in the terminal while in the root directory of our projects:要安裝所有這些庫, 我們將在項(xiàng)目的根目錄中使用終端中的npm 命令:

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

配置

我們還需要配置我們的安裝程序。首先, 讓我們添加一個(gè) npm 腳本, 它將允許我們使用npm test 命令運(yùn)行測(cè)試。在我們的項(xiàng)目根目錄的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"
  },
}

編寫測(cè)試

讓我們確認(rèn)我們的測(cè)試設(shè)置工作正常。Jest將在一個(gè)名為__tests__ 的目錄中自動(dòng)查找整個(gè)樹中的測(cè)試文件 (是的, 帶有下劃線)。讓我們?cè)谖覀兊?b>src/components/Timeline 目錄中創(chuàng)建我們的第一個(gè)__tests__ 目錄, 并創(chuàng)建我們的第一個(gè)測(cè)試文件:

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

Timeline-test.js文件將包括我們的Timeline組件的所有測(cè)試 (如文件名所示)。讓我們?yōu)闀r(shí)間軸組件創(chuàng)建第一個(gè)測(cè)試。

我們將使用 Jasmine框架編寫測(cè)試。Jasmine提供了一些方法, 我們將使用相當(dāng)多的一些方法。以下兩種方法都接受兩個(gè)參數(shù), 第一種是描述字符串, 第二個(gè)是要執(zhí)行的函數(shù):

describe()

it()

describe() 函數(shù)為我們提供了一種將測(cè)試組合成邏輯包的方法。由于我們正在為我們的Timeline編寫一組測(cè)試, 我們將在測(cè)試中使用describe() 函數(shù)來指示我們正在測(cè)試時(shí)間軸。

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

describe("Timeline", () => {

});

我們可以使用it() 函數(shù)添加第一個(gè)測(cè)試。it() 函數(shù)是我們將設(shè)定預(yù)期的位置。讓我們用我們的第一個(gè)期望, 一個(gè)通過和一個(gè)失敗來設(shè)置我們的測(cè)試, 這樣我們可以看到輸出的差異。

In the same file, let"s add two tests:在同一個(gè)文件中, 讓我們添加兩個(gè)測(cè)試:

describe("Timeline", () => {

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

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

我們將看看可能的期望, 我們可以設(shè)定在一個(gè)時(shí)刻。首先, 讓我們運(yùn)行我們的測(cè)試。

執(zhí)行測(cè)試

create-react-app 包使用Jest自動(dòng)為我們建立了一個(gè)質(zhì)量測(cè)試環(huán)境,。我們可以使用yarn test或npm test腳本執(zhí)行測(cè)試。

在終端中, 讓我們執(zhí)行我們的測(cè)試:

yarn test

從這個(gè)輸出, 我們可以看到兩個(gè)測(cè)試, 一個(gè)通過測(cè)試 (帶有一個(gè)綠色的復(fù)選標(biāo)記) 和一個(gè)失敗的測(cè)試 (還有一個(gè)紅色的 x 和失敗的描述)。

讓我們更新第二個(gè)測(cè)試, 使它通過將期望更改為toBeFalsy():

describe("Timeline", () => {

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

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

重新運(yùn)行測(cè)試, 我們可以看到我們有兩個(gè)通過測(cè)試

`yarn test`

期望

在默認(rèn)情況下, Jest在測(cè)試中提供了一些全局命令 (即沒必要要求的內(nèi)容)。其中之一是expect() 命令。expect() 命令有幾個(gè)期望, 我們可以調(diào)用它, 包括我們已經(jīng)使用的兩個(gè):

toBeTruthy()

toBeFalsy()

toBe()

toEqual()

toBeDefined()

toBeCalled()

etc.

在以下的 jest頁面中可以獲得一整套期望:https://facebook.github.io/jest/docs/api.html#writing-assertions-with-expect.

expect() 函數(shù)采用單個(gè)參數(shù): 返回要測(cè)試的值函數(shù)的返回值。例如, 我們已經(jīng)寫好的兩個(gè)測(cè)試通過了true 和false的布爾值。

現(xiàn)在我們已經(jīng)編寫了第一個(gè)測(cè)試并確認(rèn)了我們的設(shè)置, 我們將在明天開始測(cè)試我們的時(shí)間軸組件。今天的工作很好, 明天見!

云服務(wù)器 GPU云服務(wù)器全棧性能測(cè)試 react實(shí)現(xiàn)輪播圖第7天:CSS入門 FCKeditor23

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87163.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

airborne007

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Pacificrack：美國多ip便宜vps/站群vps;1核2G 30G SSD,5-253個(gè)IP

閱讀 1824·2021-09-28 09:46
Codepen 每日精選（2018-4-7）

閱讀 3143·2019-08-30 14:22
odoo基礎(chǔ)數(shù)據(jù)加載

閱讀 1878·2019-08-26 13:36
vuex源碼閱讀分析

閱讀 3343·2019-08-26 11:32
認(rèn)識(shí)canvas（畫扇形動(dòng)態(tài)畫圓弧（requestAnimationFrame結(jié)合settimeo

閱讀 2081·2019-08-23 16:56
web前端開發(fā)中遇到的問題整理(一)

閱讀 1151·2019-08-23 16:09
React 源碼深度解讀（八）：事務(wù) - Part 2

閱讀 1303·2019-08-23 12:55
docker 搭建前端開發(fā)環(huán)境不完全指南

閱讀 2148·2019-08-23 11:44

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【全棧React】第23天: 實(shí)現(xiàn)測(cè)試

相關(guān)文章

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

**【全棧React】第24天: 測(cè)試應(yīng)用**

**【全棧React】第22天: 測(cè)試簡介**

**【全棧React】第11天: 純組件**

**【全棧React】第29天: 持續(xù)集成**

發(fā)表評(píng)論

0條評(píng)論

airborne007

男|高級(jí)講師

TA的文章

Pacificrack：美國多ip便宜vps/站群vps;1核2G 30G SSD,5-253個(gè)IP

Codepen 每日精選（2018-4-7）

odoo基礎(chǔ)數(shù)據(jù)加載

vuex源碼閱讀分析

認(rèn)識(shí)canvas（畫扇形動(dòng)態(tài)畫圓弧（requestAnimationFrame結(jié)合settimeo

web前端開發(fā)中遇到的問題整理(一)

React 源碼深度解讀（八）：事務(wù) - Part 2

docker 搭建前端開發(fā)環(huán)境不完全指南

最新活動(dòng)