成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ziwenxie / 546人閱讀

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

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

我們先看一下我們應(yīng)用的一個特征，并考慮邊緣案例的位置以及我們假設(shè)將會發(fā)生的情況

.讓我們從Timeline 組件開始, 因為它是我們當(dāng)前應(yīng)用中最復(fù)雜的。

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

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

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

。

在任何情況下, 我們可以假設(shè)會有一個標(biāo)題

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

有至少四狀態(tài)更新的列表

這些 假設(shè) 將轉(zhuǎn)化為我們的測試。

測試

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

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

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

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

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

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

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

import Timeline from "../Timeline";

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

讓我們寫第一個測試。我們的第一個假設(shè)是非常簡單的測試。我們正在測試以確保元素被包裝在.notificationsFrame 類中。在我們編寫的每個測試中, 我們都需要將應(yīng)用呈現(xiàn)在工作測試文檔中。react-addons-test-utils 庫提供了一個函數(shù)來執(zhí)行這個叫做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();
  });

})

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

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

findRenderedDOMComponentWithClass() 函數(shù)接受 兩個 參數(shù)。第一個是渲染樹 (我們的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 設(shè)置了一個期望, 即它可以在.notificationsFrame 類中找到該組件。如果它沒有找到一個, 它將拋出一個錯誤, 我們的測試將失敗。

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

yarn test

通過我們的一次測試, 我們確認(rèn)了我們的測試設(shè)置正在運(yùn)行。

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87162.html

相關(guān)文章

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

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

    appetizerio 評論0 收藏0

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

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

    Cciradih 評論0 收藏0

  • 【全棧React】第22天: 測試簡介

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

    qc1iu 評論0 收藏0

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

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

    xavier 評論0 收藏0

  • 【全棧React】第4天: 復(fù)雜組件

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

    Mike617 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<