js + cypress

상태관리 라이브러리 없이 만들어본 js 프로젝트에서 간단한 tdd를 적용해 보았습니다. 

라이브러리는 cypress를 사용하였습니다.

 

저는 cypress를 테스트 도구로서만 알고 있었습니다. 

좀 더 자세히 알아봐야겠습니다.

cypress 공식문서에서는 'A complete end-to-end testing experience' 라고 소개하고 있습니다.

Ent to End test가 뭘까요??

 

End To End test는 사용자 관점에서 테스트 하는 방법입니다.

의도하는 텍스트가 출력이 되었는지, 삭제 버튼을 누른후에 해당 컴포넌트가 삭제되었는지 등등 

사용자 관점에서 테스트를 하는 방법입니다.

 

cypress등장 이전에 테스트를 해본적은 없지만 이전에는 selenium등 가상의 브라우저를 띄워서 동작을 수행하였다고 합니다.

이전에 selenium을 브라우저의 쿠키 정보를 가져오기위해 사용해 봤는데 리눅스 환경에서 크롬드라이버를 설치하느라 애먹었던 기억이 나네요...

두서가 길었네요 이제 한번 cypress를 사용해 보겠습니다.

 

---

요약 순서

1. cypress 라이브러리 설치
2. package.json 설정
3. test 파일 설정
4. test 실행

 

1. Cypress 라이브러리 설치

yarn 을 통해 cypress를 설치해줍니다.

yarn add -D cypress

npm을 통해 설치해 준다면 아래와 같이 되겠네요

npm install cypress --save-dev

 

2. package.json 설정

package.json에 test script를 추가해주겠습니다

"scripts": {
    // ...
    "test": "cypress open"
    // ...
}

test를 추가해주고 바로 yarn test를 실행해 줍니다.

그러면 가상의 브라우저가 실행되고 

폴더 내에 cypress 폴더, cypress.json이 생성된 것을 확인할 수 있습니다.

변경된 폴더 구조

실행된 브라우저

 

 

3. test 파일 설정

저는 moonbucks.spec.js 이름으로 파일을 생성해주었습니다.

 

describe("moonbucks test", () => {
  beforeEach(() => {
    cy.visit("http://127.0.0.1:5500/client");
  });

  it("add americano in espresso tab", () => {
    cy.get("#espresso-menu-name").type("아메리카노");
    cy.get("#espresso-menu-submit-button").click();
    cy.get(".menu-name").first().should("have.text", "아메리카노");
  });

  it("edit americano in espresso tab", () => {
    cy.window().then((win) => {
      cy.stub(win, "prompt").returns("americano");
      cy.get(".menu-edit-button").first().click();
      cy.get(".menu-name").first().should("have.text", "americano");
    });
  });

  it("sold out americano in espresso tab", () => {
    cy.get(".menu-sold-out-button").first().click();
    cy.get(".menu-name")
      .first()
      .should("have.css", "text-decoration")
      .and("match", /line/);
  });

  it("delete americano in espresso tab", () => {
    cy.get(".menu-remove-button").first().click();
    cy.get(".menu-name").should("not.exist");
  });
});

 

코드의 내용을 보면

테스트 코드의 실행 전에 개발환경에서 구현 주소에 방문합니다.

이후 테스트 메소드를 하나씩 실행합니다.

그 다음부터는 메소드의 이름이 직관적이라 내용을 파악하기 쉬우실겁니다.

 

주어진 예시코드와 공식문서를 통해 원하는 유형의 테스트를 작성하면 됩니다.

https://docs.cypress.io/guides/getting-started/writing-your-first-test

Writing Your First Test | Cypress Documentation

 

테스트 코드의 내용중 prompt의 내용을 테스트 하는 방법에 대해 간략히 설명하겠습니다.

핵심 flow만 먼저 살펴보면 

 

1. cy.window()를 통해 현재 page에서 활성화 되어있는 window 객체를 가져옵니다.

2. window 의 prompt 메소드를 재정의 해줍니다.

 

=> stub메소드를 통해  built-in 함수들이나 커스텀 메소드들을 재정의 하고 제어할 수 있습니다.

 

 

https://docs.cypress.io/api/commands/window

window | Cypress Documentation

https://docs.cypress.io/api/commands/stub#Method

stub | Cypress Documentation

 

 

4. test 실행

이제 test 파일을 실행해줍시다.

위 화면에서 테스트하고자 하는 파일을 더블 클릭하면 가상의 브라우저가 켜질 것입니다.

가상의 브라우저에 동작과정과 결과까지 같이 보여주는 모습을 확인할 수 있습니다.

 

테스트 동작 과정