애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • NextJS Cypress 설정하기
    Next.js 2022. 2. 17. 11:56
    728x90

    요즘은 거의 필수가 된 요소가 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');
    });

    댓글

Designed by Tistory.