日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本文介紹了如何在 Cypress 的幫助下設(shè)置 React 組件和測(cè)試 React 組件。

赤壁網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

在本文中，我將解釋以下內(nèi)容：

• 如何設(shè)置 React 組件。
• 如何在 Cypress 的幫助下測(cè)試 React 組件。

什么是組件測(cè)試？

組件測(cè)試，也稱為單元測(cè)試或模塊測(cè)試，是一種軟件測(cè)試技術(shù)，涉及測(cè)試軟件應(yīng)用程序的單個(gè)單元或組件。這些單元通常與應(yīng)用程序的其余部分隔離并單獨(dú)測(cè)試以確保它們按預(yù)期運(yùn)行。

為執(zhí)行組件開發(fā)人員通常會(huì)創(chuàng)建測(cè)試用例，以執(zhí)行被測(cè)組件的各種功能。這些測(cè)試用例可以自動(dòng)化，這使得重復(fù)運(yùn)行它們變得更加容易，并確保即使在對(duì)代碼進(jìn)行更改后組件也能正常測(cè)試，運(yùn)行。

用于組件測(cè)試的Cypress？

Cypress 是一種前端測(cè)試工具，允許開發(fā)人員為 Web 應(yīng)用程序編寫和運(yùn)行測(cè)試。Cypress 的一個(gè)方面是組件測(cè)試，它涉及獨(dú)立于應(yīng)用程序的其余部分測(cè)試單個(gè)組件。這有助于識(shí)別特定組件的問題，并在將其集成到更大的應(yīng)用程序之前確保其正常工作。

在使用 Cypr進(jìn)行組件測(cè)試時(shí)，開發(fā)人員可以編寫以各種方式與單個(gè)組件交互的測(cè)試腳本。例如，他們可以模擬用戶輸入，測(cè)試組件在不同條件下的呈現(xiàn)和行為，并驗(yàn)證組件是否產(chǎn)生了預(yù)期的輸出ess 。

端到端測(cè)試與組件測(cè)試

端到端測(cè)試

端到端測(cè)試，也稱為集成測(cè)試，從頭到尾測(cè)試整個(gè)系統(tǒng)，模擬真實(shí)場(chǎng)景和用戶交互。這種類型的測(cè)試用于確保系統(tǒng)的所有組件按預(yù)期一起工作，并且系統(tǒng)滿足其功能和非功能要求。

組件測(cè)試

組件測(cè)試，也稱為單元測(cè)試，單獨(dú)測(cè)試系統(tǒng)的各個(gè)組件或單元。這種類型的測(cè)試用于確保每個(gè)單獨(dú)的組件都按預(yù)期工作，并且系統(tǒng)滿足其功能和非功能要求。組件測(cè)試通常比端到端測(cè)試更快、更簡(jiǎn)單，并且可以揭示單個(gè)組件中的問題。

以下是端到端測(cè)試與組件測(cè)試之間的一些比較：

為什么我們需要組件測(cè)試？

組件測(cè)試是一種測(cè)試，側(cè)重于測(cè)試軟件應(yīng)用程序的各個(gè)組件，使其與其他組件隔離開來。它是軟件開發(fā)過程的重要組成部分，因?yàn)樗兄诖_保應(yīng)用程序的每個(gè)組件都正常工作并滿足為其設(shè)置的要求。

組件測(cè)試很重要的原因有幾個(gè)：

• 它有助于在開發(fā)過程的早期識(shí)別和修復(fù)缺陷，從長(zhǎng)遠(yuǎn)來看可以節(jié)省時(shí)間和資源。
• 它允許開發(fā)人員單獨(dú)測(cè)試應(yīng)用程序的組件，這可以更容易地識(shí)別所發(fā)現(xiàn)的任何問題的根本原因。
• 它可以通過確保每個(gè)組件正常工作并滿足所需的規(guī)范來提高應(yīng)用程序的整體質(zhì)量。
• 它可以通過在與應(yīng)用程序的其余部分集成之前識(shí)別單個(gè)組件的問題來降低集成問題的風(fēng)險(xiǎn)。

總的來說，組件測(cè)試是軟件開發(fā)過程的重要組成部分，因?yàn)樗兄诖_保應(yīng)用程序的各個(gè)組件正常工作并滿足所需的規(guī)范，從而可以提高應(yīng)用程序的整體質(zhì)量并降低出現(xiàn)問題的風(fēng)險(xiǎn)部署應(yīng)用程序時(shí)。

組件測(cè)試的優(yōu)勢(shì)

組件測(cè)試有多種優(yōu)點(diǎn)，下面將對(duì)其中一些進(jìn)行說明。

隔離：通過隔離測(cè)試單個(gè)組件，開發(fā)人員可以更輕松地識(shí)別和修復(fù)問題，而不必調(diào)查和調(diào)試多個(gè)組件之間的復(fù)雜交互。

可重用性：通過徹底測(cè)試各個(gè)組件，開發(fā)人員可以確保它們正常運(yùn)行并且可以在系統(tǒng)的其他部分中重用。

更快的調(diào)試：組件測(cè)試允許開發(fā)人員快速識(shí)別問題的根源，而不是必須搜索整個(gè)系統(tǒng)才能找到它。

及早發(fā)現(xiàn)問題：通過在開發(fā)過程的早期測(cè)試組件，開發(fā)人員可以在問題變得更加困難和耗時(shí)之前發(fā)現(xiàn)問題。

成本效益：組件測(cè)試是一種成本效益高的系統(tǒng)測(cè)試方法，因?yàn)樗试S開發(fā)人員測(cè)試系統(tǒng)的較小部分，這將減少耗時(shí)和成本。

模塊化：通過測(cè)試單個(gè)組件，開發(fā)人員可以構(gòu)建更易于維護(hù)、更新和擴(kuò)展的模塊化程度更高的系統(tǒng)。

更好的測(cè)試覆蓋率：通過測(cè)試單個(gè)組件，開發(fā)人員可以確保系統(tǒng)的每個(gè)部分都經(jīng)過徹底測(cè)試，這有助于提高整體測(cè)試覆蓋率。

預(yù)先請(qǐng)求

1. 節(jié)點(diǎn)已安裝。
2. 比。代碼 已安裝。

出于演示目的，我們使用 counter react 組件并使用 Cypress Version 12.4.0測(cè)試組件。

創(chuàng)建示例 React 組件以開始使用 Cypress

本節(jié)介紹如何設(shè)置Counter React 組件、安裝 Cypress 并將其與 React 集成，然后才能創(chuàng)建組件測(cè)試。

步驟1

在終端中運(yùn)行以下命令。

npx create - react - app my - new - sample - app

運(yùn)行上述命令后，如下圖所示：

第2步

進(jìn)入根目錄并運(yùn)行以下命令以啟動(dòng) React 應(yīng)用程序并安裝 Cypress。

cd my-new-sample-app
npm start
npm install cypress -D

npm start命令服務(wù)器啟動(dòng)后。

步驟 3

運(yùn)行以下命令打開 Cypress。

npx cypress open OR yarn cypress open

步驟4

選擇“組件測(cè)試”。

步驟 5

選擇“組件測(cè)試”后，將打開以下屏幕。

從上面的屏幕中選擇“創(chuàng)建 React App”。

單擊下一步并等待依賴項(xiàng)安裝，一旦安裝了所有依賴項(xiàng)，屏幕將如下所示。

步驟 6

點(diǎn)擊繼續(xù)按鈕；下面的屏幕是打開的。

步驟 7

單擊上面屏幕中的繼續(xù)按鈕。

選擇您的瀏覽器，在我的例子中是 Chrome，然后單擊“在 Chrome 中開始組件測(cè)試”；屏幕在下面打開。

步驟 8

選擇“創(chuàng)建新規(guī)范”，輸入新規(guī)范的路徑，然后單擊“創(chuàng)建規(guī)范”。

單擊“確定”按鈕后。

下面是安裝 React App 后文件夾結(jié)構(gòu)的截圖。

步驟 9

在 src 文件夾中創(chuàng)建一個(gè)計(jì)數(shù)器組件并為其命名QAAutomationLabs.jsx

import { useState } from 'react'
export default function Counter({ initial = 0 }) {
const [count, setCount] = useState(initial)
return (
padding: 30
}}>
 setCount(count - 1)}>
-

{count}
 setCount(count + 1)}>
+


)
}

步驟 10

現(xiàn)在在組件文件夾下創(chuàng)建“QAAutomationLabs.cy.js”。在這里，我們有一個(gè)單一的測(cè)試來確保我們的組件安裝。

import { mount } from 'cypress/react'
import Counter from '../../src/QAAutomationLab'
describe('', () => {
it('mounts', () => {
cy.mount()
})
})

步驟 11

運(yùn)行以下命令以運(yùn)行組件測(cè)試用例。并啟動(dòng)以下內(nèi)容：

npx cypress open --component

在規(guī)格列表中，單擊QAAutomationLabs.cy.js并查看安裝在測(cè)試區(qū)域中的計(jì)數(shù)器組件。

使用 Cypress 測(cè)試計(jì)數(shù)器組件

現(xiàn)在讓我們使用 Cypress 測(cè)試這個(gè)計(jì)數(shù)器組件。

場(chǎng)景涵蓋：

1. 當(dāng)我們通過單擊 (+) 圖標(biāo)進(jìn)行增量時(shí)的場(chǎng)景。
2. 當(dāng)我們通過單擊 (-) 圖標(biāo)進(jìn)行遞減時(shí)的場(chǎng)景。

讓我們創(chuàng)建 Cypress 測(cè)試用例（it 塊）。

import Counter from "../../src/QAAutomationLab";
describe("", () => {
const counterSelector = '[data-cy="counter"]';
const incrementSelector = "[aria-label=increment]";
const decrementSelector = "[aria-label=decrement]";
it("Two Time Increment then decrement the count ", () => {
cy.mount();
//Two time Increment the Count
cy.get(incrementSelector).click();
cy.get(incrementSelector).click();
// Assert
cy.get(counterSelector).should("contain.text", 2);
//Do the decrement
cy.get(decrementSelector).click();

// Assert
cy.get(counterSelector).should("have.text", "1");
// Assert color
cy.get(decrementSelector)
.should("have.css", "color")
.and("eq", "rgb(0, 0, 0)");
// Assert background color
cy.get(decrementSelector)
.should("have.css", "background-color")
.and("eq", "rgb(0, 128, 0)");
});
it("Two Time decrement then Increment the count ", () => {
cy.mount();
//Two time decrement the count
cy.get(decrementSelector).click();
cy.get(decrementSelector).click();
// Assert
cy.get(counterSelector).should("have.text", "-2");
//Then increment the count
cy.get(incrementSelector).click();
cy.get(counterSelector).should("have.text", "-1");
// Assert color
cy.get(decrementSelector)
.should("have.css", "color")
.and("eq", "rgb(0, 0, 0)");
// Assert background color
cy.get(decrementSelector)
.should("have.css", "background-color")
.and("eq", "rgb(0, 128, 0)");
});
});

運(yùn)行命令運(yùn)行以上測(cè)試用例

npx cypress open --component

輸出

下面是針對(duì)測(cè)試“計(jì)數(shù)器”組件執(zhí)行的測(cè)試用例的輸出。

總結(jié)

出于多種原因，組件測(cè)試與 Cypress 一起是有益的。它允許及早發(fā)現(xiàn)錯(cuò)誤，提高代碼質(zhì)量，增加對(duì)代碼更改的信心，促進(jìn)重構(gòu)，簡(jiǎn)化集成測(cè)試，并且具有成本效益。

此外，通過為單個(gè)組件編寫測(cè)試，開發(fā)人員被迫考慮其代碼的設(shè)計(jì)和功能，這可以帶來更好的代碼質(zhì)量和可維護(hù)性。

本文標(biāo)題：如何使用Cypress執(zhí)行組件測(cè)試
文章位置：http://www.dlmjj.cn/article/coodphp.html