【全棧React】第24天: 測試應用

ziwenxie 發布于2019-08-21 11:50 / 538人閱讀

摘要：我們的第一個假設是非常簡單的測試。我們正在測試以確保元素被包裝在類中。在我們編寫的每個測試中我們都需要將應用呈現在工作測試文檔中。作為提醒我們可以使用命令或命令來運行測試。

本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3804
原文：https://www.fullstackreact.com/30-days-of-react/day-24/

我們先看一下我們應用的一個特征，并考慮邊緣案例的位置以及我們假設將會發生的情況

.讓我們從Timeline 組件開始, 因為它是我們當前應用中最復雜的。

Timeline 組件顯示一個具有動態標題的標題的狀態列表。我們要測試我們的組件中的任何動態邏輯。我們必須從測試開始的最簡單的邏輯是圍繞Timeline 的動態標題。

我們喜歡開始測試, 列出我們對一個組件的假設, 以及在什么情況下這些假設是真實的。例如, 我們可以對Timeline 組件進行假設的列表可能包括以下內容:

在任何情況下, Timeline 將包含一個有.notificationsFrame 類的

。

在任何情況下, 我們可以假設會有一個標題

在任何情況下, 我們假設搜索按鈕將開始隱藏

有至少四狀態更新的列表

這些假設將轉化為我們的測試。

測試

讓我們打開src/components/Timeline/__tests__/Timeline-test.js文件。我們在這個文件中留下了一些虛擬測試, 所以讓我們清除這些, 并開始一個新的描述塊:

describe("Timeline", () => {
  // Tests go here
})

對于我們編寫的針對React每個測試的我們都希望測試文件導入React。我們還要引入React測試實用程序:

import React from "react";
import TestUtils from "react-addons-test-utils";

describe("Timeline", () => {
  // Tests go here
})

由于我們在這里測試Timeline 組件, 因此我們還希望將其引入到我們的工作區中:

import React from "react";
import TestUtils from "react-addons-test-utils";

import Timeline from "../Timeline";

describe("Timeline", () => {
  // Tests go here
})

讓我們寫第一個測試。我們的第一個假設是非常簡單的測試。我們正在測試以確保元素被包裝在.notificationsFrame 類中。在我們編寫的每個測試中, 我們都需要將應用呈現在工作測試文檔中。react-addons-test-utils 庫提供了一個函數來執行這個叫做renderIntoDocument():

import React from "react";
import TestUtils from "react-addons-test-utils";

import Timeline from "../Timeline";

describe("Timeline", () => {

  it("wraps content in a div with .notificationsFrame class", () => {
    const wrapper = TestUtils.renderIntoDocument();
  });

})

如果我們運行這個測試 (盡管我們還沒有設定任何期望), 我們會發現測試代碼有問題。React認為我們正在嘗試呈現一個未定義的組件:

讓我們在 DOM 中使用另一個稱為findRenderedDOMComponentWithClass()的TestUtils函數來找到我們期望的元素。

findRenderedDOMComponentWithClass() 函數接受兩個參數。第一個是渲染樹 (我們的wrapper 對象), 第二個是我們希望它查找的 css 類名:

import React from "react";
import TestUtils from "react-addons-test-utils";

import Timeline from "../Timeline";

describe("Timeline", () => {

  it("wraps content in a div with .notificationsFrame class", () => {
    const wrapper = TestUtils.renderIntoDocument();
    const node =
    TestUtils
      .findRenderedDOMComponentWithClass(wrapper, "notificationsFrame");
  });

})

這樣, 我們的測試就會通過 (相信與否)。TestUtils 設置了一個期望, 即它可以在.notificationsFrame 類中找到該組件。如果它沒有找到一個, 它將拋出一個錯誤, 我們的測試將失敗。

作為提醒, 我們可以使用 npm test 命令或yarn test 命令來運行測試。我們將使用yarn test 命令, 因為我們正在測試一個組件:

yarn test

通過我們的一次測試, 我們確認了我們的測試設置正在運行。

不幸的是, TestUtils 的界面有點復雜和低級。enzyme 庫是TestUtils的封裝, 提供一個更容易和高級的界面, 斷言針對的React組件在測試。明天我們將詳細討論酶。

今天的工作很好, 明天見!

GPU云服務器云服務器全棧性能測試阿里云輕量應用服務器24元第7天:CSS入門人工智能及其應用第四版

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87162.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】第11天: 純組件

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

Cciradih 2019-08-20 18:33 評論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】第29天: 持續集成

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

xavier 2019-08-21 11:52 評論0 收藏0
【全棧React】第4天: 復雜組件

摘要：本文轉載自眾成翻譯譯者鏈接原文太棒了，我們已經構建了第一個組件。天前一章節，我們開始構建我們的第一個組件。內容部分內有個不同的項目組件。決定劃分組件的深度比科學更顯得藝術。子組件當組件嵌套在另一個組件中時，它被稱為子組件。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

Mike617 2019-08-20 18:29 評論0 收藏0