Cypress
Cypress는 End-to-End (E2E) 및 Component Testing에 사용되는 테스트 러너입니다.
빠른 시작
create-next-app과 with-cypress 예제를 함께 사용하여 빠르게 시작할 수 있습니다.
npx create-next-app@latest --example with-cypress with-cypress-app수동 설정
Cypress를 시작하기 위해 cypress 패키지를 설치하세요:
npm install --save-dev cypresspackage.json의 scripts 필드에 Cypress를 추가하세요:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"cypress": "cypress open",
}처음으로 Cypress를 실행하여 권장하는 폴더 구조를 사용하는 예제를 생성하세요:
npm run cypress생성된 예제와 Cypress 문서의 Writing Your First Test 섹션을 살펴보면 Cypress에 익숙해지는 데 도움이 될 것입니다.
E2E 테스트와 컴포넌트 테스트 중 어떤 것을 사용해야 할까요?
Cypress 문서에는 이 두 가지 테스트 유형의 차이점과 각각을 사용하는 적절한 시기에 대한 가이드가 있습니다.
첫 번째 Cypress E2E 테스트 작성하기
다음의 두 개의 Next.js 페이지를 가정합니다:
pages/index.js
import Link from 'next/link';
export default function Home() {
return (
<nav>
<h1>Homepage</h1>
<Link href="/about">About</Link>
</nav>
);
}pages/about.js
export default function About() {
return (
<div>
<h1>About Page</h1>
<Link href="/">Homepage</Link>
</div>
);
}내비게이션이 올바르게 작동하는지 확인하는 테스트를 추가하세요:
cypress/e2e/app.cy.js
describe('Navigation', () => {
it('should navigate to the about page', () => {
// index 페이지에서 시작합니다
cy.visit('http://localhost:3000/');
// "about"을 포함하는 href 속성을 가진 링크를 찾아 클릭합니다
cy.get('a[href*="about"]').click();
// 새로운 URL은 "/about"을 포함해야 합니다
cy.url().should('include', '/about');
// 새로운 페이지는 "About page"라는 h1 요소를 포함해야 합니다
cy.get('h1').contains('About Page');
});
});cypress.config.js 구성 파일에 baseUrl: 'http://localhost:3000'을 추가한다면 cy.visit("/") 대신 cy.visit("http://localhost:3000/")를 사용할 수 있습니다.
첫 번째 Cypress 컴포넌트 테스트 작성하기
컴포넌트 테스트는 전체 애플리케이션을 번들로 묶거나 서버를 실행할 필요 없이 특정 컴포넌트를 빌드하고 마운트합니다. 이를 통해 성능이 개선된 테스트를 수행할 수 있으며 Cypress E2E 테스트와 동일한 API를 제공합니다.
참고: 컴포넌트 테스트는 Next.js 서버를 실행하지 않기 때문에
<Image />와getServerSideProps와 같은 기능은 기본적으로 동작하지 않습니다. 컴포넌트 테스트 내에서 이러한 기능을 작동시키는 예제에 대해서는 Cypress Next.js 문서를 참조하세요.
이전 섹션의 컴포넌트와 같은 컴포넌트를 가정하고 예상된 출력이 렌더링되는지 확인하는 테스트를 추가하세요:
pages/about.cy.js
import AboutPage from './about.js';
describe('<AboutPage />', () => {
it('should render and display expected content', () => {
// About 페이지를 위한 React 컴포넌트를 마운트합니다
cy.mount(<AboutPage />);
// 새로운 페이지는 "About page"라는 h1 요소를 포함해야 합니다
cy.get('h1').contains('About Page');
// 예상된 URL을 가진 링크가 존재하는지 확인합니다
// *링크를* 따라가는 것은 E2E 테스트에 더 적합합니다
cy.get('a[href="/"]').should('be.visible');
});
});Cypress 테스트 실행하기
E2E 테스트
Cypress E2E 테스트는 실제 Next.js 애플리케이션을 테스트하므로 Cypress를 시작하기 전에 Next.js 서버를 실행해야 합니다. 실제 코드에 대해 테스트를 실행하여 애플리케이션의 동작과 더 가깝게 모사할 수 있도록 권장합니다.
다음을 실행하여 Next.js 서버를 빌드한 후에 Cypress를 시작하고 E2E 테스트 스위트를 실행하세요:
npm run build
npm run start
npm run cypress -- --e2e참고: 대안으로
start-server-and-test패키지를 설치하고package.json의 scripts 필드에 추가할 수 있습니다:"test": "start-server-and-test start http://localhost:3000 cypress"로 설정하여 Next.js 프로덕션 서버를 Cypress와 함께 시작할 수 있습니다. 변경 사항을 적용한 후에 애플리케이션을 다시 빌드해야 합니다.
컴포넌트 테스트
npm run cypress -- --component를 실행하여 Cypress를 시작하고 컴포넌트 테스트 스위트를 실행하세요.
CI (Continuous Integration)를 위한 준비
지금까지 Cypress를 실행하면 상호작용하는 브라우저가 열리는데, CI 환경에서는 이상적이지 않습니다. cypress run 명령어를 사용하여 Cypress를 헤드리스(headless) 모드로 실행할 수도 있습니다:
package.json
"scripts": {
//...
"e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
"e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
"component": "cypress open --component",
"component:headless": "cypress run --component"
}Cypress와 CI에 관련한 더 많은 정보는 다음 리소스를 참조하세요:
