정확하게 구현 방법을 전달하기보단... 기존에서 바뀐 테스트 환경에 대해서 한번쯤 정리하고 도입 이후에 적절하게 사용하기 위해 정리하는 내용입니다...!
msw'testing library' 등 더 많은 내용이 필요하지만 생략했음.
Vite로 마이그레이션해 빌드 속도를 개선했지만, 테스트 환경 또한 이에 걸맞게 정비할 필요가 있었다. 그래서 새롭게 잡고 다시 제대로 도입하고자 한다.
- ✅ 유닛/통합 테스트의 한계
빠른 기능 개발 속도에 따라 QA 리소스를 줄이기 위해 End-to-End(E2E) 테스트의 필요성이 대두되었습니다. - ✅ 테스트 목적에 맞는 전략 정립
단위 테스트, 통합 테스트, E2E 테스트를 각각 어떤 상황에서 적용해야 하는지 판단 기준을 세우고 도입을 결정했습니다.
🧪 어떤 테스트가 어떤 상황에 적합할까?
나름 사용을 구분지었음.
| 구분 | 목적 | 대표 도구 | 적용 예시 |
|---|---|---|---|
| Unit Test | 함수/컴포넌트 단위 정확성 검증 | Vitest | util 함수, 단독 버튼 컴포넌트 |
| Integration Test | 여러 유닛이 함께 동작하는 흐름 테스트 | Testing Library + Vitest | Form → API 요청 흐름 |
| E2E Test | 사용자 관점 전체 시나리오 검증 | Cypress | 로그인 → 대시보드 이동, 슬라이더 흐름 |
🚀 Cypress 테스트 예시
간단하게 로그인 페이지에 진입해서 로그인하고 대기 중에 슬라이더가 제대로 렌더되는지를 테스트하는 코드를 작성해보았다.
describe('로그인 페이지', () => {
it('ID, 비밀번호를 입력하고 로그인 버튼을 누르면 이동해야 한다', () => {
cy.visit('/login');
cy.contains('Login').should('exist');
cy.get('input[name="username"]').type(Cypress.env('NURIHAUS_ADMIN_USERNAME'));
cy.get('input[name="password"]').type(Cypress.env('NURIHAUS_ADMIN_PASSWORD'));
cy.get('button[type="submit"]').click();
cy.url().should('not.include', '/login');
cy.contains('Dashboard').should('exist');
});
it('슬라이더가 렌더링되고 모든 슬라이드가 순차적으로 표시되는지 확인', () => {
cy.visit('/login');
cy.get('.slick-slider').should('exist');
cy.contains('Your global marketing partner').should('exist');
cy.wait(4000);
cy.get('.slick-slide.slick-active').within(() => {
cy.contains('Creator Selection').should('exist');
});
cy.wait(4000);
cy.get('.slick-slide.slick-active').within(() => {
cy.contains('1:1 Communication').should('exist');
});
cy.wait(4000);
cy.get('.slick-slide.slick-active').within(() => {
cy.contains('Wide range of usability').should('exist');
});
});
});🛠 Cypress 주요 메서드 정리
| 메서드 | 설명 |
|---|---|
cy.visit('/url') | 특정 경로로 이동 |
cy.get('selector') | DOM 요소 선택 |
cy.contains('text') | 텍스트 포함 여부 확인 |
cy.type('text') | input에 입력 |
cy.click() | 클릭 이벤트 실행 |
cy.url().should('include', ...) | URL 조건 확인 |
cy.wait(ms) | 일정 시간 대기 |
.within(() => {...}) | 특정 요소 내부 범위 한정 |
cy.intercept() | API 요청을 가로채서 stub/mock 처리 |
cy.request() | 실제 HTTP 요청 전송 (API 테스트) |
cy.viewport(w, h) | 브라우저 사이즈 지정 (반응형 테스트) |
cy.clearCookies() | 쿠키 삭제 |
cy.clearLocalStorage() | 로컬 스토리지 삭제 |
cy.reload() | 페이지 새로고침 |
cy.screenshot() | 현재 상태 스크린샷 저장 (디버깅 용도) |
🔐 Cypress 환경 변수 설정 방법
Cypress에서 로그인 계정, 비밀번호 등 민감한 정보를 테스트 코드에 직접 노출하지 않기 위해 .env 파일 또는 cypress.config.ts를 통해 환경 변수를 관리합니다.
📁 .env 파일 설정
NURIHAUS_ADMIN_USERNAME=your_username
NURIHAUS_ADMIN_PASSWORD=your_password⚙️ cypress.config.ts에 주입
import { defineConfig } from 'cypress';
import * as dotenv from 'dotenv';
dotenv.config();
export default defineConfig({
env: {
NURIHAUS_ADMIN_USERNAME: process.env.NURIHAUS_ADMIN_USERNAME,
NURIHAUS_ADMIN_PASSWORD: process.env.NURIHAUS_ADMIN_PASSWORD,
},
e2e: {
baseUrl: 'http://localhost:3000',
},
});📦 또는 cypress.env.json 파일 사용
{
"NURIHAUS_ADMIN_USERNAME": "your_username",
"NURIHAUS_ADMIN_PASSWORD": "your_password"
}
.gitignore에 반드시 포함시켜 민감 정보 유출을 방지하세요.
✅ 정리
- Vite 기반 프로젝트에서는
Vitest + Cypress조합이 가장 빠르고 직관적인 테스트 환경 - 유닛 ↔ E2E 테스트 역할을 명확히 분리하면 QA 리소스 절감 + 회귀 이슈 최소화
- 환경 변수 및 provider 구성까지 잘 설정해두면 유지보수 시에도 신뢰할 수 있는 테스트 자동화 기반 마련 가능
FE 입니다.