-
NextJS Cypress 설정하기Next.js 2022. 2. 17. 11:56728x90
요즘은 거의 필수가 된 요소가 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'); });
'Next.js' 카테고리의 다른 글
NextJS Babel에서 SWC로 이사가기 1 (1) 2022.05.17 NextJS Image태그를 활용한 스켈레톤(Skeleton)처리 (4) 2022.04.21 NextJS Image 태그 height auto로 사용하기 (0) 2022.01.11 NextJS + Redux-Toolkit + next-redux-wrapper 설정하기 (0) 2021.09.24 NextJS Image에서 fallback 활용하기 (0) 2021.09.16