[React] Cypress로 e2e 테스트를 구현해보자

Next.js를 포함한 React 프로젝트에서 Cypress로 e2e를 구현해 봅시다.

 

프로젝트에 Cypress를 설치해 줍니다.

$ yarn add cypress --dev
or
$ npm install cypress --save-dev

 

Package.json에 가서 스크립트를 추가해 줍니다.

    "scripts": {
        ...,
        "test": "cypress open",
        "cy:run": "cypress run"
    },

터미널에서 명령어를 작성해 봅시다

$ yarn test 
or
$ npm run test

 

그럼 아래와 같은 프로그램이 켜질 겁니다!

 

우리는 e2e를 구현할 것이니까 첫 번째를 선택하고 파일을 생성해 준다는 거에 동의하고 넘어갑니다.

제 기준 Electron이 편해서 선택하여 Start를 누릅니다.

 

⛔️ 이 과정에서 크롬이나 Electron을 켜면 빈 화면(blank screen)이 뜨는 경우가 있는데 
참고 (https://github.com/cypress-io/cypress/issues/4131) 위 글에서는 웹소켓 문제, 플러그인 문제 등등을 언급합니다.

저는 공식문서만 보고 따라 했을 뿐인데 안 돼서 근본적인 해결 방법이 아니라 생각했습니다.

yarn test를 실행한 터미널에서 오류가 하나도 없는데 해당 현상이 계속 지속되었지만, 놀랍게도 맥북 재부팅하니까 해결이 됐습니다.

✅ 컴퓨터 재부팅을 한 번 해보세요!

 

다시 코드로 돌아가봅시다.

 

cypress.config.ts와 전역 폴더에 cypress가 생성되었을 겁니다.

저는 아래와 같이 작성했습니다.

// cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
    projectId: process.env.CYPRESS_PROJECT_ID,
    e2e: {
        baseUrl: 'http://localhost:3000',
        setupNodeEvents(on, config) {
            // implement node event listeners here
        }
    },
    chromeWebSecurity: false
});

 

cypress 폴더 내부에 e2e 폴더를 하나 생성해주세요.

 

e2e 폴더에서 각자 테스트 케이스들을 지정해 주면 됩니다.

// cypress/e2e/signIn.cy.ts

describe('SignIn', () => {
    beforeEach(() => {
        cy.visit('/auth/signIn');
    });

    it('should signIn successfully', () => {
        cy.get('[type="text"]').type('test@test.com');

        cy.get('[type="password"]').type('testUser123');

        cy.contains('로그인').click();

        cy.url().should('include', '/main');
    });

    it('should navigate to sign up page successfully', () => {
        cy.contains('회원가입').click();

        cy.url().should('include', '/auth/signUp');
    });
});

간단하게 테스트 코드를 작성해 보았습니다.

 

cypress.config.ts에 baseUrl을 지정해 줘서 pathname만 지정해 줘도 동작합니다.

 

beforeEach() 내부의 정의한 건 해당 describe에 정의된 테스트 케이스들이 모두 공유한다고 생각하면 됩니다.

즉 모두 시작할 때 /auth/signIn을 방문하겠죠?

 

해당 코드는 아래와 같이 중복 코드를 줄이는 데 도움이 됩니다.

describe('invalid inputs', () => {
        beforeEach(() => {
            cy.get('[id="nickname"]').type('test');
            cy.get('[id="email"]').type('test@naver.com');
            cy.get('[id="password"]').type('testUser123');
            cy.get('[id="password_check"]').type('testUser123');
        });

        it('should display an error message when nickname is too short', () => {
            cy.get('[id="nickname"]').clear().type('h');
            cy.contains('가입하기').should('be.disabled');
        });

        it('should display an error message when email is invalid', () => {
            cy.get('[id="email"]').clear().type('testnaver.com');
            cy.contains('가입하기').should('be.disabled');
        });

        it('should display an error message when password is too short', () => {
            cy.get('[id="password"]').clear().type('1234');
            cy.contains('가입하기').should('be.disabled');
        });

        it('should display an error message when match check password is not same', () => {
            cy.get('[id="password_check"]').clear().type('testUser124');
            cy.contains('가입하기').should('be.disabled');
        });
    });

본인이 필요한 테스트 케이스를 작성하고 다시 Cypress 프로그램으로 가보면

아래와 같이 E2E specs에 정의한 테스트들이 정의되어 있을 거예요.

 

여기서 클릭하면 아래 영상처럼 GUI로 비디오 및 스냅숏을 보면서 바로 확인할 수 있습니다.

 

CLI로 하려면 위에서 정의한 cy:run 스크립트를 사용하면 됩니다.

$ yarn run cy:run -- --record --spec "cypress/e2e";
or
$ npm run cy:run -- --record --spec "cypress/e2e";

위 명령어를 작성하면 e2e 내부에 있는 모든 테스트들을 시도하여 터미널에 결과를 반환해 줍니다.

 

개인적으로 Cypress 프로그램에서 작성하는 것보단 코드로 작성하는 게 좋은 것 같습니다.

 

CLI에서 테스트를 시도하면 Cypress안에 screenshots, videos 폴더에 데이터들이 쌓이는데 깃허브에 올라가지 않도록 

. gitignore에 추가해 줍시다

# cypress video, screenshots

cypress/videos
cypress/screenshots

아래 PR에 e2e 관련 코드를 적어놔서 참고하면 좋을 것 같습니다.

https://github.com/Nimble-Meet/client/pull/28

feat(e2e): e2e test 구현 by pmhxhsj · Pull Request #28 · Nimble-Meet/client