TDD로 배우는 웹 FE (2)

편백이란?

– JavaScript 테스트 라이브러리

– 오픈 소스

– E2E 테스트, 유닛 테스트 등 가능

Cypress 설치 및 실행

– 참조

https://docs.cypress.io/guides/overview/why-cypress

왜 사이프러스인가? | 사이프러스 문서

무엇을 배울 것인가

docs.cypress.io

npm i -D cypress
npx cypress open

그러면 cypress 런치패드가 실행됩니다.

무엇을 선택해야 할지 모르겠다면 공식 문서에 따라 E2E-Testing을 선택하세요!

– 언제든지 변경 가능

설정 창에서 기본값으로 계속을 클릭합니다.

그런 다음 브라우저를 선택하고 Chrome을 선택할 수 있습니다.

사양 파일 생성

기본 설정을 마치고 나면 루트 폴더에 Cypress 폴더가 생성된 것을 확인할 수 있습니다.

– e2e test를 선택하면 내부에 또 다른 e2e 폴더가 있고 여기에 spec 파일을 작성할 수 있습니다.

(런치패드에서도 쓸 수 있음)

– 예

사양 파일이란 무엇입니까?

– Cypress 테스트 코드

– 테스트 코드 name.cy.js 형식으로 작성

– 예

// describe 내부에 작성하며, 테스트 이름을 넣을 수 있다
describe("2개의 숫자를 다루는 계산기", () => {
  beforeEach(() => { // 각 테스트 전에 반복 실행해주는 기능
    cy.visit("../../index.html"); // visit 를 통해 테스트할 주소를 입력
  });
  // it : 세부 테스트
  it("2개의 숫자에 대해 덧셈 가능", () => {
    cy.get("#num1").type("1"); // selector의 element를 가져와서 typing 해줌
    cy.get("#num2").type("2");
    cy.get("#submit").click(); // click event 실행
    cy.get("#result").should("have.text", "3"); // 3이라는 텍스트를 가지는지 검사
  });
});

– 에스린트 적용 가능

https://github.com/cypress-io/eslint-plugin-cypress

GitHub – cypress-io/eslint-plugin-cypress: Cypress를 사용하는 프로젝트를 위한 ESLint 플러그인

Cypress를 사용하는 프로젝트용 ESLint 플러그인. GitHub에서 계정을 생성하여 cypress-io/eslint-plugin-cypress 개발에 기여하십시오.

github.com