TDD

Test Driven Development

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성해 테스트 코드를 Pass할 수 있는 실제 코드를 작성한다.

방법

1. 원하고자 하는 기능의 테스트 코드를 작성한다.
2. 테스트 실행 Fail
3. 테스트 코드에 맞는 실제 코드를 작성한다.
4. 테스트 실행 Pass

장점

1. TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나온다.

APP을 만들면서 test 환경 만들기

npm install eslint-plugin-testing-library eslint-pulgin-jest-dom --save-dev

• 해야할 일 : Counter 는 0부터 시작한다.
• test 작성 :

test("the counter starts at 0", () => {
  render(<App />);
  // screen object를 이용해서 원하는 엘레멘트에 접근한다 (ID로)
  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(0);
});

    const [counter,setCounter] = useState(0)
    <div className="App">
      <p data-testid="counter">{counter}</p>
    </div>

• 테스트 실행 :
  

FireEvent API

유저가 발생시키는 액션(이벤트)에 대한 테스트를 해야하는 경우 사용

참고 : https://testing-library.com/docs/dom-testing-library/api-events/

test("버튼 눌리면 1이 커지는지 확인", () => {
  render(<App />);
  const plusButton = screen.getByTestId("plus-button");
  fireEvent.click(plusButton);

  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(1);
});

test("버튼 눌리면 1이 작아지는지 확인", () => {
  render(<App />);
  const plusButton = screen.getByTestId("minus-button");
  fireEvent.click(plusButton);

  const counterElement = screen.getByTestId("counter");
  expect(counterElement).toHaveTextContent(-1);
});

렌더링을 다시 하기 때문에 값이 유지되지는 않는다 0 => +1 => -1 X

fireEvent 보다 userEvent 를 이용하는 것이 더 좋은 방법이다.
? userEvent는 fireEvent를 이용해서 만들어 준 것이다.
input, radio 등의 타입에도 적절한 반응이 가능하다.

ToHaveStyle

test("on/off 버튼이 파랑색이냐", () => {
  render(<App />);
  const buttonElement = screen.getByTestId("on/off-button");
  expect(buttonElement).toHaveStyle({ backgroundColor: "blue" });
});

toBeDisabled

test("on/off 버튼 누르면 disabled 되었는지 확인", () => {
  render(<App />);
  const onOffButton = screen.getByTestId("on/off-button");
  fireEvent.click(onOffButton);
  const plusButton = screen.getByTestId("plus-button");
  expect(plusButton).toBeDisabled();
});

tip

• test.skip
  이 테스트만 넘어가기
• test.only
  이 테스트만 확인하기

Query 사용 우선 순위

지금까지 element를 찾는 qeury 는 전부 getByTestId 였지만, 이것은 이상적이지만은 않다.
왜? 이용자들은 element의 id를 알 수 없다.

1. getByRole 버튼, 인풋, 라디오 .. 등등의 역할에 따라서 찾는 것이 우선순위
   getByRole('button',{name:/submit/i})

• /i => 모든 문자를 대문자 소문자 상관없이 찾음

2. getByLabelText

3. getByAltText : 이미지, input 일 경우