이 블로그에서 우리는 Cypress의 테스트 구동 개발과 단원 테스트의 최선의 실천을 토론할 것이다.프런트엔드 개발자로서 우리의 주요 목표는 다양한 UI 화면을 만드는 것이다. 그 중에서 각종 기능과 재사용 가능한 구성 요소의 개발을 포함한다.그러나 우리 대다수 사람들이 실천에 옮기지 않은 것은 우리가 그 중요성을 이해하지 못했기 때문일 것이다. 그것은 바로 테스트, 특히 전단 단원 테스트이다.
단원 테스트는 무엇입니까?
첫 번째 일!단원 테스트가 무엇인지 알아보자.
단원 테스트는 프로젝트의 기본 구축 블록(방법, UI 요소 등)이 정상적으로 작동하는지 확인합니다.React 구성 요소에서, 이것은 개발자에게 그들이 정확하게 렌더링되었는지, 도구가 정확한 상태로 구성 요소에 전달되었는지 등을 알려 줍니다.
왜 그것이 중요합니까?

더 큰 프로젝트에서 구성 요소의 수가 증가함에 따라 단원 테스트는 개발자의 구원자가 되었다.우리는 완전히 통합되기 전에 단일 코드를 테스트하고 프로젝트의 다른 부분에 영향을 주지 않는 상황에서 구성 요소 작업의 피드백을 더욱 빨리 얻을 수 있습니다!

작성 단원 테스트의 실천을 주입하면 우리는 문제를 더욱 진지하게 생각할 뿐만 아니라 가장자리 상황을 발견하는 데 도움을 줄 뿐만 아니라 반대로 품질이 더 좋은 코드를 작성할 수 있다.

결함은 시작 단계에서 발견되었기 때문에 후기 복구 비용을 줄일 수 있다. 이것은 우리가 개발자로서 매우 어려운 임무이다.

그래서 우리는 리트머스에서 진행된 측백나무 테스트에 대해 토론할 것이다.
Litmus는 개발자와 SRE가 응용 프로그램 배치의 약점을 발견할 수 있도록 Kubernetes에 혼돈을 설정하는 도구를 제공하는 혼돈 프로젝트 프레임워크입니다.그것은 매우 사용하기 쉽고 상세한 문서를 첨부한다.그것은 또한 대량의 혼돈 실험을 제공했으니, 너는 찾을 수 있다.만약 당신이 리트머스를 배우기 시작하고 싶다면, 본고는 틀림없이 당신에게 도움이 될 것입니다.당신도 우리의 slack 커뮤니티에 가입하여 공개 토론을 진행할 수 있습니다.현재 React와 Typescript를 사용하여 전방에 컨트롤러와 사용자 인터페이스 체험을 제공하고 혼돈된 작업 흐름을 관리하고 감시하며 둘러싼 사건을 관리하는 데 사용되고 있습니다Litmus Portal.
측백나무는 무엇입니까?
Cypress는 자바스크립트 기반의 테스트 프레임워크로 모차 위에 구축되어 있으며 모차 자체는 기능이 완비된 자바스크립트 테스트 프레임워크이다.또한 다중 브라우저 테스트를 포함하여 더욱 쉽게 사용할 수 있습니다.
공식documentation of Cypress에서 설명한 바와 같이 Cypress는 개발자가 모든 유형의 테스트를 작성하도록 도와줍니다.

유닛 테스트

통합 테스트

엔드 투 엔드 테스트

왜 측백나무를 선택합니까?
구현을 시작하기 전에 왜 Cypress를 선택하여 단원 테스트를 하는지 알아보겠습니다.따라서 주요 원인은 다음과 같습니다.

브라우저에서 실행, 속도가 놀랍다!

우리는 그것의 설정을 걱정할 필요가 없다. 왜냐하면 그것은 사용하기 쉽고 매우 좋고 상세한 문서를 제공하기 때문이다.

은 끊임없이 발전하는 지역사회를 자랑하고 있다.

우리가 단원 테스트를 진행할 때 따르는 몇 가지 최선의 실천은 다음과 같다.

은 독특한 “data-cy” 속성을 사용하여 원소를 더욱 쉽게 포지셔닝할 수 있도록 하고 표지, id 또는 클래스 포지셔닝 원소를 사용하는 것을 방지해야 한다. 왜냐하면 이런 원소는 변경되기 쉽기 때문이다.
예:

<button id="main" class="btn btn-large" name="submission"
  role="button" data-cy="submit">Submit</button>
  cy.get('[data-cy=submit]').click()

폴더 구조가 명확하게 유지됩니다.모든 테스트는 cypress/components 디렉터리의 litmus-portal/frontend 에 저장됩니다.

디버깅이 필요한 곳에 로그를 추가해서 디버깅을 편리하게 합니다.

우리는 실패할 때의 혼동을 피하기 위해 모든 방법의 단언을 제한하려고 한다.

모든 테스트는 서로 독립적이기 때문에 어떤 순서대로 테스트를 실행할 수 있고 하나의 테스트 용례의 실패는 다른 테스트 용례에 영향을 주지 않는다.

우리는 모든 테스트를 간단명료하게 유지하여 가독성과 이해력을 높일 것이다.

이 항목은 전면에서 Typescript를 사용하기 때문에 같은 버전에서 모든 테스트를 작성했습니다.
현재,cypress와 작은react 프로그램을 설치할 것입니다.
선행 조건:

React app

사용자 정의 구성 요소

측백나무

cypress 설치

npm로 cypress 설치

  npm install cypress

실을 이용하여 측백나무를 설치하다

  yarn add cypress 

Cypress가 성공적으로 설치되면 이 명령을 실행하여 시도할 수 있습니다.
개방 측백나무

npm의 Open cypress 사용

  npx cypress open

실을 사용한 넓은측백나무

  yarn run cypress open 

Typescript를 사용하여 react 응용 프로그램에서 셀 테스트에 대한 Cypress를 설정합니다.
Cypress React Unit 테스트 플러그인 설치

npm install --save-dev cypress cypress-react-unit-test

tsconfig를 설정합니다.이것들을 추가하면

{
   "compilerOptions": {
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       "types": ["node", "cypress"]
   },
   "include": ["src", "cypress/component/*.tsx"]
}

cypress를 설정합니다.이것들을 추가하면

{
   "experimentalComponentTesting": true,
   "componentFolder": "cypress/component",
   "specFiles": "*spec.*",
   "defaultCommandTimeout": 4000,
   "execTimeout": 200000,
   "taskTimeout": 200000
}

테스트 용례를 포함하는 폴더를 지정했는지 확인하십시오. 이 테스트 스크립트는 cypress/components 폴더에 있습니다.
이 시간 초과here를 검사할 수 있습니다.
Cypress 폴더에서 plugin/index.js 파일에 다음 내보내기 문을 추가합니다.

* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
   require("cypress-react-unit-test/plugins/react-scripts")(on, config);
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config;
};

이 파일에서 우리는 함수를 내보냈다.Cypress는 이 함수를 호출하여 항목의 설정을 전달하고 공개된 이벤트에 연결할 수 있도록 합니다.
Cypress에서 첫 번째 유닛 테스트 작성
따라서 이 기본적인react 프로그램을 만들었습니다. 사용자는 InputField를 사용하여 1-10 사이의 값을 입력하고 진도막대는 색을 변경합니다. 반원 진도막대가 있어서 입력한 값에 따라 입력하고 변경할 수 있습니다.우리도 리트머스 문호에서 이 부품들을 사용했다.
용례:

1-3 사이의 값을 입력하면 진행률 막대 색상이 빨간색으로 바뀝니다.

4-6 사이의 값을 입력하면 진행률 막대 색상이 노란색으로 바뀝니다.

7-10 사이의 값을 입력하면 진행률 막대 색상이 녹색으로 바뀝니다.

반원형 진도봉의 경우 1-100 사이의 입력을 받아들여 결과를 표시합니다.

react 프로그램의 로그인 페이지는 다음과 같습니다.

이 구성 요소에 대한 단원 테스트를 작성해 보겠습니다.

선형 진행률 막대
이 구성 요소에 대해 다음과 같은 몇 가지 테스트를 수행합니다.

값

에 따른 스피드 길이

값이 2인 경우 색상 진행률 표시줄

값이 6시인 색상 진행률 표시줄

값이 8인 경우 색상 진행률 막대

이 구성 요소의 테스트 스크립트는 다음과 같습니다.

/// <reference types="Cypress" />
import React from "react";
import { mount } from "cypress-react-unit-test";
import LinearProgressBar from "../../src/components/ProgressBar/LinearProgressBar";

describe("Linear Progressbar Testing", () => {
 it("Progressbar stroke for value 2", () => {
   mount(<LinearProgressBar value={2} />);
   cy.get(".rc-progress-line-path").should(
     "have.css",
     "stroke-dasharray",
     "20px, 100px"
   );
 });
 it("Progressbar stroke for value 8", () => {
   mount(<LinearProgressBar value={8} />);
   cy.get(".rc-progress-line-path").should(
     "have.css",
     "stroke-dasharray",
     "80px, 100px"
   );
   cy.get(".rc-progress-line-path").should("have.attr", "stroke", "#109B67");
 });
 it("Progressbar stroke for value 6", () => {
   mount(<LinearProgressBar value={6} />);
   cy.get(".rc-progress-line-path").should(
     "have.css",
     "stroke-dasharray",
     "60px, 100px"
   );
   cy.get(".rc-progress-line-path").should("have.attr", "stroke", "#F6B92B");
 });

describe(): 이 함수는 해당 구성 요소의 테스트 세트를 "선형 진행률 게이지 테스트"라고 설명하는 데 사용됩니다.it(): 이 함수를 사용하여 "Progressbar stroke for value 2"와 같은 특정한 테스트 이름을 지정했습니다.
참고: describe() 및 it() 은 Mocha가 제공하는 테스트 인터페이스입니다.

describe("Linear Progressbar Testing", () => {
 it("Progressbar stroke for value 2", () => {
   mount(<LinearProgressBar value={2} />);
   cy.get(".rc-progress-line-path").should(
     "have.css",
     "stroke-dasharray",
     "20px, 100px"
   );
 });

mount(): 이 기능은 테스트에 사용할 구성 요소를 설치합니다.
우리는 여기에 구성 요소가 사용하는 속성, 즉 값 = {2}를 추가했습니다.
구성 요소가 정확하게 설치/구현된 후에 구성 요소의 다른 속성을 검사할 수 있습니다. 예를 들어 이 예에서 should ("have.css", "cssproperty", "cssvalue") 의 도움으로 값이 2일 때 진도표의 너비를 검사할 수 있습니다.
테스트가 성공하면 브라우저에서 다음 결과를 얻을 수 있습니다.

마찬가지로 다음 테스트에서:

mount(<LinearProgressBar value={8} />);
   cy.get(".rc-progress-line-path").should(
     "have.css",
     "stroke-dasharray",
     "80px, 100px"
   );
   cy.get(".rc-progress-line-path").should("have.attr", "stroke", "#109B67");
 });

여기서, 우리는 서로 다른 속성 값 8로 구성 요소를 다시 설치합니다.
완료 후, 우리는 진도표의 폭을 검사하고, 이 예에서 “#109B67” 이 값이 7보다 높기 때문에 정확한 색깔이 표시되었는지 검사할 수 있다.
이것은 should(“have.attr”,” stroke”,”#109B67”)를 사용하여 완성할 수 있습니다. 여기서 우리는 필획의 색깔이 용례에 부합되는지, 즉 Green / #109B67 을 검사합니다.

반원 진행률 막대
이 구성 요소의 테스트 스크립트는 다음과 같습니다.

/// <reference types="Cypress" />

import React from "react";
import { mount } from "cypress-react-unit-test";
import SemiCircularProgressBar from "../../src/components/ProgressBar/SemiCircularProgressBar";

// Test Suite -
// Progress Bar props -> value = 50, 10, 100
describe("Semi Circular Progress Bar has appropriate values", () => {
 [50, 10, 100].map((i) => {
   it(`Value is equal to ${i}`, () => {
     const wrapper = <SemiCircularProgressBar value={i} />;
     mount(wrapper);
     cy.get("[data-cy=progressValue]").then((value) => {
       expect(value[0].innerText).to.equal(`${i}%`);
     });
   });
 });
});

// Test Suite - Icon has the correct src
describe("Icons have a correct path", () => {
 it("Progress Bar icon has a correct source", () => {
   const wrapper = <SemiCircularProgressBar value={40} />;
   mount(wrapper);
   cy.get("[data-cy=progressIcon]")
     .should("have.attr", "src")
     .should("include", "./icons/graph.svg");
 });
});

이 구성 요소에 대해 우리는 네 개의 테스트를 실행할 것이다.세 가지 테스트는 도구에서 정확한 값이 통과되었는지, 마지막 테스트는 이미지가 정확한 출처에서 왔는지 확인하는 데 사용됩니다.
여기서 우리가 사용하는 것은 구성 요소와 비치는 값 그룹입니다.

[50, 10, 100].map((i) => {
   it(`Value is equal to ${i}`, () => {
     const wrapper = <SemiCircularProgressBar value={i} />;
     mount(wrapper);
     cy.get("[data-cy=progressValue]").then((value) => {
       expect(value[0].innerText).to.equal(`${i}%`);
     });
   });
 });

여기에서 우리는 "[data-cy=progressValue]" 테스트 용례를 작성하고 있는 요소를 쉽게 사용할 수 있다.그런 다음 다음과 같이 어셈블리에 정확한 값을 표시할 수 있습니다.

it("Progress Bar icon has a correct source", () => {
   const wrapper = <SemiCircularProgressBar value={40} />;
   mount(wrapper);
   cy.get("[data-cy=progressIcon]")
     .should("have.attr", "src")
     .should("include", "./icons/graph.svg");
 });

이와 유사하게 이러한 테스트 용례에서 우리는 위에서 논의한 should() 속성을 사용하여 이미지의 원본이 정확한지 검사한다.

결론

이것은 우리가 Cypress를 사용하여 단원 테스트를 하는 몇 가지 기본적인 예이다.원한다면 더 많은 테스트 세트here를 추가할 수 있습니다.제안이나 피드백이 있으면 언제든지 현재 진행 중인 프로젝트 - Litmus Portal 를 확인하십시오.필요한 변경 사항을 발견하면 언제든지 청구서를 제출할 수 있습니다.
이 블로그의 작성자는 다음과 같습니다.

이것은 우리의 첫 번째 블로그이기 때문에, 당신의 견해와 건의를 매우 알고 싶습니다.궁금한 점이 있으면 언제든지 연락 주세요.통찰력이 있다고 생각했으면 좋겠어!
마지막으로 가장 중요하지 않은 것은 아니다. 혼돈공사가 당신을 흥분시키거나 해운원생 혼돈공사를 더 많이 이해하고 싶다면 우리Litmus website와Litmus repo를 살펴보는 것을 잊지 마라.만약 네가 재미있다고 생각한다면, 반드시 별 하나를 남겨야 한다.😊
건배!