如何使用Cypress執(zhí)行組件測試

作者：科技狠活與軟件技術(shù) 2023-04-09 15:08:20

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

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

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

什么是組件測試？

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

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

用于組件測試的Cypress？

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

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

端到端測試與組件測試

端到端測試

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

組件測試

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

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

為什么我們需要組件測試？

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

組件測試很重要的原因有幾個：

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

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

組件測試的優(yōu)勢

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

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

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

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

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

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

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

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

預(yù)先請求

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

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

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

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

步驟1

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

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

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

第2步

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

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

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

步驟 3

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

npx cypress open OR yarn cypress open

步驟4

選擇“組件測試”。

步驟 5

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

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

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

步驟 6

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

步驟 7

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

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

步驟 8

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

單擊“確定”按鈕后。

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

步驟 9

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

import { useState } from 'react'
export default function Counter({ initial = 0 }) {
const [count, setCount] = useState(initial)
return (
<div style={{
padding: 30
}}>
<button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="decrement" notallow={() => setCount(count - 1)}>
-
</button>
<span data-cy="counter">{count}</span>
<button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="increment" notallow={() => setCount(count + 1)}>
+
</button>
</div>
)
}

步驟 10

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

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

步驟 11

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

npx cypress open --component

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

使用 Cypress 測試計數(shù)器組件

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

場景涵蓋：

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

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

import Counter from "../../src/QAAutomationLab";
describe("<Counter>", () => {
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(<Counter ></Counter>);
//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(<Counter ></Counter>);
//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)");
});
});