亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

ziwenxie / 586人閱讀

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

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

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

.讓我們從Timeline 組件開(kāi)始, 因?yàn)樗俏覀儺?dāng)前應(yīng)用中最復(fù)雜的。

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

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

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

。

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

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

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

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

測(cè)試

讓我們打開(kāi)src/components/Timeline/__tests__/Timeline-test.js文件。我們?cè)谶@個(gè)文件中留下了一些虛擬測(cè)試, 所以讓我們清除這些, 并開(kāi)始一個(gè)新的描述塊:

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

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

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

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

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

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

import Timeline from "../Timeline";

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

讓我們寫第一個(gè)測(cè)試。我們的第一個(gè)假設(shè)是非常簡(jiǎn)單的測(cè)試。我們正在測(cè)試以確保元素被包裝在.notificationsFrame 類中。在我們編寫的每個(gè)測(cè)試中, 我們都需要將應(yīng)用呈現(xiàn)在工作測(cè)試文檔中。react-addons-test-utils 庫(kù)提供了一個(gè)函數(shù)來(lái)執(zhí)行這個(gè)叫做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)行這個(gè)測(cè)試 (盡管我們還沒(méi)有設(shè)定任何期望), 我們會(huì)發(fā)現(xiàn)測(cè)試代碼有問(wèn)題。React認(rèn)為我們正在嘗試呈現(xiàn)一個(gè)未定義的組件:

讓我們?cè)?DOM 中使用另一個(gè)稱為findRenderedDOMComponentWithClass()的TestUtils函數(shù)來(lái)找到我們期望的元素。

findRenderedDOMComponentWithClass() 函數(shù)接受 兩個(gè) 參數(shù)。第一個(gè)是渲染樹(shù) (我們的wrapper 對(duì)象), 第二個(gè)是我們希望它查找的 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");
  });

})

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

作為提醒, 我們可以使用 npm test 命令或yarn test 命令來(lái)運(yùn)行測(cè)試。我們將使用yarn test 命令, 因?yàn)槲覀冋跍y(cè)試一個(gè)組件:

yarn test

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

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

今天的工作很好, 明天見(jiàn)!

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87162.html

相關(guān)文章

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

    摘要：今天我們將討論創(chuàng)建組件的最終方案，即無(wú)狀態(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 評(píng)論0 收藏0

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

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

    Cciradih 評(píng)論0 收藏0

  • 【全棧React】第22天: 測(cè)試簡(jiǎn)介

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

    qc1iu 評(píng)論0 收藏0

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

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

    xavier 評(píng)論0 收藏0

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

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

    Mike617 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<