테스트는 개발 프로세스에서 중요한 부분으로, 애플리케이션이 예상대로 작동하고 시간이 지나도 견고하게 유지되도록 보장합니다. Cypress는 탁월한 개발자 경험을 제공하고 React와 같은 최신 JavaScript 프레임워크와 원활하게 통합되는 강력한 엔드투엔드 테스트 프레임워크입니다. 이 게시물에서는 실제 사례와 모범 사례를 중심으로 Cypress를 사용하여 React 애플리케이션을 설정하고 테스트하는 방법을 살펴보겠습니다.
React 애플리케이션에서 Cypress를 시작하려면 다음 단계를 따르세요.
1단계: Cypress 설치
먼저, React 프로젝트에서 Cypress를 개발 종속성으로 설치합니다.
npm install cypress --save-dev
2단계: Cypress 구성
다음을 실행하여 Cypress Test Runner를 엽니다.
npx cypress open
이렇게 하면 기본 구성과 예제 테스트를 사용하여 프로젝트에 cypress 폴더가 생성됩니다. 필요한 경우 cypress.json 파일에서 구성을 사용자 정의할 수 있습니다.
3단계: 테스트 파일 생성
cypress/e2e 디렉터리 내에서 새로운 테스트 파일(예: React-app.spec.js)을 만듭니다. 이 파일에는 React 애플리케이션에 대한 Cypress 테스트가 포함됩니다.
React용 Cypress 테스트 작성
React 애플리케이션에 대한 몇 가지 기본 테스트를 작성해 보겠습니다. 구성 요소 렌더링, 상호 작용 및 어설션을 다루겠습니다.
예: React 구성 요소 테스트
Counter라는 간단한 React 구성 요소가 있다고 가정해 보겠습니다.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};
export default Counter;
Cypress 테스트를 작성하여 구성 요소의 동작을 확인할 수 있습니다.
describe('Counter Component', () => {
beforeEach(() => {
cy.visit('/');
});
it('should render the counter with initial value', () => {
cy.get('h1').contains('Counter: 0');
});
it('should increment the counter', () => {
cy.get('button').contains('Increment').click();
cy.get('h1').contains('Counter: 1');
});
it('should decrement the counter', () => {
cy.get('button').contains('Increment').click();
cy.get('button').contains('Decrement').click();
cy.get('h1').contains('Counter: 0');
});
});
이 테스트에서:
양식 입력 테스트
사용자 이름과 비밀번호를 입력하는 로그인 양식이 있다고 가정해 보겠습니다. 테스트 방법은 다음과 같습니다.
describe('Login Form', () => {
beforeEach(() => {
cy.visit('/login');
});
it('should allow a user to type in the username and password', () => {
cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('password123');
});
it('should show an error message for invalid credentials', () => {
cy.get('input[name="username"]').type('invaliduser');
cy.get('input[name="password"]').type('wrongpassword');
cy.get('button[type="submit"]').click();
cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
});
it('should redirect to dashboard on successful login', () => {
cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('password123');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});
});
모의 API 요청
Cypress를 사용하면 백엔드에 의존하지 않고 다양한 시나리오를 테스트하기 위해 API 요청을 가로채고 모의할 수 있습니다.
describe('API Mocking', () => {
beforeEach(() => {
cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fakeToken' } }).as('loginRequest');
cy.visit('/login');
});
it('should mock a successful login', () => {
cy.get('input[name="username"]').type('testuser');
cy.get('input[name="password"]').type('password123');
cy.get('button[type="submit"]').click();
cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);
cy.url().should('include', '/dashboard');
});
});
Cypress는 React 애플리케이션을 테스트할 수 있는 강력하고 개발자 친화적인 방법을 제공합니다. 이 가이드에 설명된 단계와 예제를 따르면 React 프로젝트에서 Cypress를 설정하고 효과적인 엔드투엔드 테스트를 작성할 수 있습니다. Cypress의 강력한 기능과 모범 사례를 활용하면 안정적이고 유지 관리가 가능한 고품질 테스트를 생성하여 React 애플리케이션이 예상대로 작동하도록 보장할 수 있습니다.
즐거운 테스트를 해보세요!
위 내용은 Cypress를 사용한 React 애플리케이션 테스트: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
