React 1. Udemy(7)
1. Udemy(7)
Testing
✍️ Manual Testing
- 브라우저에서 코드 미리보기 및 테스트 작성
- 매우 중요: 사용자가 볼 수 있는 것을 볼 수 있다
- 오류 발생 가능성: 가능한 모든 조합과 시나리오를 테스트하는 것은 어렵다
✍️ Automated Testing
- 코드를 테스트하는 코드
- 앱의 개별 구성 요소를 테스트한다
- 매우 기술적이지만 모든 구성 요소를 한 번에 테스트할 수 있다
Unit Tests
- 개별 구성 요소(functions, components)를 격리하여 테스트한다
- 프로젝트에는 일반적으로 수십 개 또는 수백 개의 단위 테스트가 포함된다
- 가장 흔한 중요한 종류의 test
Integration Tests
- 여러 빌딩 블록의 조합을 test
- 프로젝트에는 일반적으로 두 가지 통합 테스트가 포함된다
- 중요하지만 대부분의 경우 unit test에 집중한다
End-to-End (e2e) Tests
- 사용자가 경험하는 것처럼 앱에서 전체 시나리오를 테스트한다
- 프로젝트에는 일반적으로 몇 가지 e2e 테스트만 포함된다
- 중요하지만 수동으로도 수행할 수 있음
✍️ Required tools
Jest
: 테스트를 실행하고 결과를 주장하기 위한 도구가 필요하다
React Testing Library
: 반응 앱 / 구성 요소를 '시뮬레이션'하는 도구가 필요하다
Jest
: 테스트를 실행하고 결과를 주장하기 위한 도구가 필요하다React Testing Library
: 반응 앱 / 구성 요소를 '시뮬레이션'하는 도구가 필요하다두 툴 모두 create-react-app을 사용할 때 이미 설정되어 있다
✍️ Writing Tests
Arrange
: 테스트 데이터, 테스트 조건 및 테스트 환경 설정Act
: 테스트해야 하는 실행 논리(예: 실행 함수)Assert
: 실행 결과와 예상 결과 비교- 테스트를 실행하기 위해선 리액트 프로젝트 생성시 자동으로 생성되는 setupTests.js파일을 삭제하면 안된다
컴포넌트이름.test.js
파일을 생성해준다
// 예시
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Greeting from './Greeting';
describe('Greeting component', () => {
test('renders "Hello World" as a text', () => {
// Arrange
render(<Greeting />);
// Act
// ... nothing
// Assert
const helloWorldElement = screen.getByText('Hello World', { exact: false });
expect(helloWorldElement).toBeInTheDocument();
});
test('renders "good to see you" if the button was NOT clicked', () => {
render(<Greeting />);
const outputElement = screen.getByText('good to see you', { exact: false });
expect(outputElement).toBeInTheDocument();
});
test('renders "Changed!" if the button was clicked', () => {
// Arrange
render(<Greeting />);
// Act
const buttonElement = screen.getByRole('button');
userEvent.click(buttonElement);
// Assert
const outputElement = screen.getByText('Changed!');
expect(outputElement).toBeInTheDocument();
});
test('does not render "good to see you" if the button was clicked', () => {
// Arrange
render(<Greeting />);
// Act
const buttonElement = screen.getByRole('button');
userEvent.click(buttonElement);
// Assert
const outputElement = screen.queryByText('good to see you', {
exact: false,
});
expect(outputElement).toBeNull();
});
});
Author And Source
이 문제에 관하여(React 1. Udemy(7)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khxxjxx/Udemy저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)