NextJS Cypress 설정하기

요즘은 거의 필수가 된 요소가 Testing이다.

지금도 Front단에서의 단위 테스트는 크게 필요하지 않다고 생각하지만, E2E테스트의 경우 Front개발에 있어서도 너무도 편한 요소이기에 간단한 설정에 대해 소개하고자 한다.

npm i cypress
npm i -D @testing-library/cypress

먼저 당연하게 cypress를 설치해야 하고 Next 등을 사용할 경우 className을 이용해 요소를 선택하는 건 어렵기 때문에 @testing-library/cypress를 설치하면 testId나 내부 글자 등으로 요소를 선택할 수 있기 때문에 설치해 준다.

두 요소의 설치가 끝났다면 base폴더에는 cypress.json, cypress폴더가 생성된 것을 확인할 수 있다.

 

이제 간단한 기본 설정을 하면 끝이다.

// cypress.json
{
  "baseUrl": "http://localhost:3000"
}

// ./cypress/tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": ["cypress", "@testing-library/cypress"],
    "outDir": "#"
  },
  "include": ["./**/*.spec.*"]
}

// ./cypress/support/commands.js
...
import '@testing-library/cypress/add-commands';

cypress.json에 baseUrl을 등록해 주는 것으로 아래와 같이 반복적으로 작성하는 코드를 줄여줄 수 있다.

cypress.visit('http://localhost:3000/');

cypress.visit('/');

그리고 나는 TS를 사용하기 때문에 cypress폴더 내에 tsconfig를 생성했고, 설치한 @testing-library/cypress를 사용하기 위해 commands.js에 import 해 적용시켜 준다.

 

이제 마무리로 자주 사용하는 요소에 대해 간단히 설명하고 마무리하려 한다.

 

먼저 가장 중요한 test파일을 등록하는 폴더는 integration폴더로 해당 폴더에는 설치 시 기본적으로 examples가 있기에 본격적으로 test를 진행할 때는 삭제하고 진행하면 된다.

 

Test 중 자주 사용하는 로그인 로그아웃 등의 요소는 그때마다 반복하기보다는 commands.js파일에 함수를 추가하는 것으로 반복 요소를 줄일 수 있다.

// commands.js > commands.ts
...
import "@testing-library/cypress/add-commands";
Cypress.Commands.add('visit', () => {
	cy.visit('/');
    cy.title().should('eq', 'Test');
});

마지막으로 실제 Test를 작성하는 간단한 예제를 끝으로 마무리하려고 한다.

// 해당 테스트 전체의 제목
describe('test', () => {
  // 해당 함수 테스트의 설명문
  it('visit', () => {
    cy.visit('/');
    cy.title().should('eq', 'Tirrilee Next');
  });
  // 함수에 대한 설명만 미리 작성한 뒤 함수를 작성하지 않으면 todo처럼 이용할 수 있다.
  it('todo');
});