Vite에서 Jest를 사용하지 않고 Cypress만 쓰기로 한 이유

Jest를 사용하지 않기로 한 이유

처음 프로젝트를 세팅할 땐 Jest, Cypress 모두 설정을 했다. 

https://jestjs.io/docs/getting-started#using-vite

Getting Started · Jest

Jest 공식 문서

하지만 위 사진에서도 나오듯이 Jest는 Vite를 완벽하게 지원하지는 않는다. 그렇기에 Jest로 테스트 코드를 짠 부분이 좀 있지만 과감하게 다 날리기로 했다.

Vite는 Vitest라는 것이 있지만, 자료가 부족하다고 들었다. 그렇기에 Cypress로만 테스트 코드를 진행하기로 했다.

 

UpLog 프로젝트에는 Cypress로 테스트 코드를 작성하고, WAYC 프로젝트는 Webpack 기반이라 Jest를 활용한 테스트 코드를 작성할 예정이다.

Cypress 적용 예시

아직은 테스트 코드를 작성 중에 있으며, 현재는 회원가입과 로그인만 구현을 했다. 예시로 회원가입 부분만 테스트 코드를 작성한 과정을 적어보려 한다.

SignUp.tsx

  <input
    type="text"
    data-cy={'nameInput'}
    value={name}
    onChange={onChangeName}
    placeholder={'이름'}
    maxLength={10}
    className={'w-5/6 h-full text-lg'}
  />

• 코드가 길기 때문에 핵심 내용만 적으려 한다.
• 우선 input 부분에 data-cy라는 속성을 넣고 이름을 설정해 두면 Cypress 테스트 코드에서 input 값을 불러오고 입력하기 쉽다.

SignUp.cy.ts

describe('회원가입 테스트', () => {
  // given - 회원가입 페이지에 접근한다
  beforeEach(() => {
    cy.visit('/signup');
  });

  it('사용자는 회원가입한다', () => {
    // when - 회원가입 조건 확인
    cy.get('[data-cy=nameInput]').as('name');
    cy.get('[data-cy=nicknameInput]').as('nickname');
    cy.get('[data-cy=emailInput]').as('email');
    cy.get('[data-cy=authInput]').as('auth');
    cy.get('[data-cy=passwordInput]').as('passwordInput');

    cy.get('@name').type('권오현');
    cy.get('@nickname').type('오리');
    cy.get('@email').type('uplog@gmail.com');
    cy.get('[data-cy=authButton]').click();
    cy.get('@auth').type('abcdef');
    cy.get('[data-cy=authButton]').click();
    cy.get('@passwordInput').type('q1w2e3r$');
    cy.get('[data-cy=singUpButton]').click();

    // then - 회원가입에 성공하고 로그인 페이지로 이동한다
    cy.get('[data-message=error-password]').should('not.exist');
    cy.get('.ant-message-success').should('exist');
    cy.url().should('include', 'http://localhost:3070/');
  });

  it('비밀번호 조건이 안맞고 인증번호가 안맞는 경우', () => {
    // when - 비밀번호 조건 & 인증번호 확인
    cy.get('[data-cy=nameInput]').as('name');
    cy.get('[data-cy=nicknameInput]').as('nickname');
    cy.get('[data-cy=emailInput]').as('email');
    cy.get('[data-cy=authInput]').as('auth');
    cy.get('[data-cy=passwordInput]').as('passwordInput');

    cy.get('@name').type('권오현');
    cy.get('@nickname').type('오리');
    cy.get('@email').type('uplog@gmail.com');
    cy.get('[data-cy=authButton]').click();
    cy.get('@auth').type('abc');
    cy.get('@passwordInput').type('password');
    cy.get('[data-cy=authButton]').click();
    cy.get('[data-cy=singUpButton]').click();

    // then - 회원가입 버튼이 활성화되어 회원가입에 성공하고 로그인 페이지로 이동한다
    cy.get('[data-message=error-password]').should('exist');
    cy.get('.ant-message-warning').should('exist');
    cy.get('.ant-message-warning').contains('인증번호가 일치하지 않습니다.');
    cy.get('.ant-message-warning').contains('인증번호 확인을 해주세요.');
  });

  it('아이디가 중복된 경우', () => {
    // when - 비밀번호 조건 & 인증번호 확인
    cy.get('[data-cy=nameInput]').as('name');
    cy.get('[data-cy=nicknameInput]').as('nickname');
    cy.get('[data-cy=emailInput]').as('email');
    cy.get('[data-cy=authInput]').as('auth');
    cy.get('[data-cy=passwordInput]').as('passwordInput');

    cy.get('@name').type('권오현');
    cy.get('@nickname').type('오리');
    cy.get('@email').type('abc@gmail.com');
    cy.get('[data-cy=authButton]').click();
    cy.get('@auth').type('abcdef');
    cy.get('[data-cy=authButton]').click();
    cy.get('@passwordInput').type('q1w2e3r$');
    cy.get('[data-cy=singUpButton]').click();

    // then - 회원가입 버튼이 활성화되어 회원가입에 성공하고 로그인 페이지로 이동한다
    cy.get('[data-message=error-password]').should('not.exist');
    cy.get('.ant-message-warning').contains('이미 존재하는 회원입니다.');
  });
});

• 회원가입 페이지의 테스트 코드이다.
• given-when-then으로 구성하여 테스트를 진행하였다.
• given은 페이지 렌더링이기에 beforeEach로 각 테스트 시작 전에 회원가입 페이지로 이동하게 했다.
• 앞서 언급한 data-cy 속성을 활용하여 input과 button을 불러오고 as로 별칭을 하여 테스트를 했다.
• 성공 사례와 실패 사례 모두 작성하였다.