TDD로 배우는 웹 FE (2) Cypress

📍Cypress 란?

- JavaScript 테스팅 라이브러리

- 오픈소스

- E2E Test, Component Test 등이 가능

 

📍Cypress 설치 및 실행

- 참고

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

Why Cypress? | Cypress Documentation

 

npm i -D cypress
npx cypress open

 

이후 cypress Launchpad가 실행된다

 

공식 문서에 따르면, 뭘 골라야 할지 확실하지 않을 떄는 E2E Testing을 고르면 된다!

- 언제든지 다시 변경할 수 있다

 

그리고 설정 창에서도 기본대로 continue를 클릭한다

 

그러면 브라우저를 고를 수 있고 크롬을 선택한다

 

 

📍spec 파일 작성

기본 설정을 완료하면 루트 폴더에 cypress 폴더가 생긴 것을 확인할 수 있다

- e2e test를 선택하면 그 안에 또 e2e 폴더가 있고, 여기에 spec 파일을 작성할 수 있다

(launchpad 에서도 작성 가능)

- 예시

폴더 예시

 

✅spec 파일이란?

- cypress의 테스트 코드

- 테스트코드이름.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이라는 텍스트를 가지는지 검사
  });
});

 

- eslint 적용도 가능하다

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

GitHub - cypress-io/eslint-plugin-cypress: An ESLint plugin for projects that use Cypress