Test Code란?

What is Testing?

자동화테스트 - 추가적인 개념으로 추가 코드를 써서 테스트 하는 법

 

장점 : 코드를 작성하면 자동으로 테스트하기 때문헤 항상 테스트가 가능하다. 즉, 전체 애플리케이션을 테스트할 수 있다.

자동화테스트가 앱의 개별 구성 요소를 테스트한다. 따라서 매우 기술적이고, 모든 것을 테스트 한다.

 

다양한 종류의 테스트

Unit Tests : 앱의 가장 작은 단위를 위해 테스트 짜는 법 독립적으로 컴포넌트를 테스트 하는 것. 많은 개수의 테스트를 한다.

Integration Tests : 다수의 구성 요소 조합을 테스트한다. 일반적으로 두 개의 인수 테스트틀 포함하지만 단위 테스트 만큼 많지 않다.

End-to-End (e2e) Tests : 전체 작업 workflowr를 테스트 한다. 기본적으로 수동 테스트를 자동화 하는 것. 단위나 인수 테스트보다는 적다.

 

따라서 이런 테스트가 중요하지만, 수동 테스트 후 하는 것을 추천한다.(즉 직접 코드를 치면서 발생하는 에러에 대해 처리하는 것)

테스트 대상 및 테스트 방법

무엇을 테스트 할것인지, 어떻게 테스트할 것인지를 생각해야한다.

테스트 코드에 어떤 종류의 코드를 넣을 것인가?

getAllByRole은 즉시 screen 요소를 찾는데 만약 비동기 동작을 해서 찾으려면(포스트 데이터가 온다면)

findAllByRole을 사용해야한다

API의 경우 fetch 자체를 테스트하는게 아니라 그로 인해 결과 값이 옳바르게 넘어 왔는가를 테스트 해야한다.

또한 에러가 발생했을 때, 잘 작동하는지를 해야한다. 절대적으로 요청에 관해 테스트를 하면 안된다.
그것을 mock 즉, 더미 함수로 사용해서 테스트 한다.

 

예시)

 

import { useState } from 'react';
import Output from './Output';

const Greeting = () => {
  const [changedText, setChangedText] = useState(false);

  const changeTextHandler = () => {
    setChangedText(true);
  };

  return (
    <div>
      <p>hello</p>
      {!changedText && <Output>good</Output>}
      {changedText && <Output>changed</Output>}

      <button onClick={changeTextHandler}>Change Text!</button>
    </div>
  );
};

export default Greeting;

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Greeting from './Greeting';
//테스트 할 컴포넌트를 import 한다

describe('<Greeting component />', () => {
  test('render hello', () => {
    render(<Greeting />);
    
    const helloWorld = screen.getByText('hello');
    expect(helloWorld).toBeInTheDocument();
  });

  test('redners good to see you if the button was NOT clicked', () => {
    render(<Greeting />);

    const outPuts = screen.getByText('good');
    expect(outPuts).toBeInTheDocument();
  });

  test('redners good to see you if the button was clicked', () => {
    render(<Greeting />);

    const buttonElement = screen.getByRole('button');
    userEvent.click(buttonElement);
   
    const outputs = screen.getByText('changed');
    expect(outputs).toBeInTheDocument();
  });

  test('renders Element check', () => {
    render(<Greeting />);

    const buttonElement = screen.getByRole('button');
    userEvent.click(buttonElement);

    const clickEle = screen.queryByText('good', { exact: false });
    expect(clickEle).not.toBeInTheDocument();
  });
});