AAA 테스트 패턴

AAA란

테스트할때 주로 사용하는 패턴으로

Arange

Act

Assert

세 단어의 약자입니다.

 

 

Arrange

Arrange는 테스트를 위한 준비를 의미 합니다.

 

Act

실행할 부분을 실행합니다.

(버튼의 이벤트를 발생 시킨다던지...)

 

Assert

원하는 대로 작동하는지 검증합니다.

 

---

간단한 예시

화면을 그리고 어떠한 버튼을 클릭했을 때, 특정 문구가 뜨는가?

 

Arrange - 화면그리기

Act - 버튼 클릭

Assert - 특정문구 있는지 확인

 

 

code

import MyScreen from "./MyScreen";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
test("MyScreen component test!", () => {
  //Arrange
  render(<MyScreen />);

  //ACT
    const btnElement = screen.getByRole('button');
    userEvent.click(btnElement);

  //assert
  const outElement = screen.getByText("hello test" ,{exact: false});
  expect(outElement).toBeNull();
});