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 : 반응 앱 / 구성 요소를 '시뮬레이션'하는 도구가 필요하다

두 툴 모두 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();
  });
});