본격적으로 코드를 짜보자.

RTL 테스트 순서

1. 가장 먼저 내가 구현하고 싶은 화면을 정리한다.
   <예) 버튼이 비활성화 되어있다. —> 체크박스를 누르면 버튼이 활성화된다. —> 한번더 누르면 다시 비활성화 된다.>
2. 이러한 패턴을 확인하기 위한 과정은
   컴포넌트 띄우고 -> 액션발생 -> 결과확인
   이순서가 test코드의 순서이다.

개념과 순서를 알았으니 이제

어떻게 생긴놈인지 코드를 보자....

주석을 따라 훑어보자

import { render, screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Prac } from "./prac";

// 내가 확인하고 싶은 요소를 멘트로 적는다.
test("체크박스에 체크가 되어있는지 확인하기", () => {
//검사할 컴포넌트를 렌더시킨다.
  render(<Prac />);
//검사하고 싶은 요소를 선언한다 
  const checkbox = screen.getByRole("checkbox");
  const button = screen.getByRole("button");
//특정한 이벤트 발생시 결과를 테스트 하고 싶다면  userevent, fireevent 사용 
// 아래 코드는 체크박스를 클릭했을 때를 의미
  userEvent.click(checkbox);
// expect는 특정한 이벤트 혹은 화면을 렌더시켰을때 보여줘야하는 결과값을 나타낸다. 
//여기서는 클릭 후 원하는 화면은 버튼이 비활성화 되는것이다.
  expect(checkbox).toBeDisabled();
//다시 체크박스를 클릭했을때
  userEvent.click(checkbox);
//원하는 결과값은 버튼이 활성화 되는 것이다.
  expect(button).not.toBeEnabled();
});

코드의 흐름은
test함수를 만들고 --> 테스트하고 싶은 기능을 정하고 --> 컴포넌트를 렌더시키고 --> 테스트 해야하는 element를 가져와서 --> 기대한 것과 같이 작동하는지 확인한다.

테스트를 확인할때는 npm start하듯이 npm test를 하면 된다

npm test

이렇게 테스트 코드를 작성하고
이제 리액트로 진짜 코드를 짜러 가는 것이다.
그렇다면 이제 코드내에서 사용되는 메서드 들에 대해서 자세히 알아보자

RTL 메서드 알아보기

1.test / describe + it

테스트를 수행할 때 사용하는 메서드는 test이다.
같은역할을 하는 메서드로 it이 있는데 it은 describe와 함께쓰인다.
describe는 같은 맥락의 테스트를 그룹화할 때 사용한다.
예시를 통해 확인해보자.

• test

test('matches snapshot', () => {
    const utils = render(<Profile username="ddd" name="ddd" />);
    expect(utils.container).toMatchSnapshot();
  );

• describe와 it

describe('<Profile />', () => {
  it('matches snapshot', () => {
    const utils = render(<Profile username="ddd" name="ddd" />);
    expect(utils.container).toMatchSnapshot();
  });
  it('shows the props correctly', () => {
    const utils = render(<Profile username="ddd" name="ddd" />);
  });
});

2. render - 테스트를 위해 특정 컴포넌트를 jsdom에 렌더링한다.

3. Queries

돔에 접근하여 요소를 가져오는 메서드
ex ) getAllbyRole : get(쿼리타입) all(타겟갯수) byrole(타겟유형)

• 쿼리타입 :경우에 맞게 쿼리 타입을 지정해줘야 한다.

  1. get - 동기적으로 처리되며 타겟을 찾지 못할 시 에러를 던진
  2. find - 비동기적으로 처리되며 타겟을 찾지 못할 시 에러를 던진다.
  3. query - 동기적으로 처리되며 타겟을 찾지 못할 시 null을 반환한다.

• 타겟갯수 : 만약 다수의 엘리먼트가 탐색되는 상황이라면 뒤에 All을 붙인다. (붙이지 않을 시 에러)

  예시)
  getByRole("checkbox") :체크박스 역할을 하는 타깃
  getAllByRole("checkbox") : 체크박스 역할을 하는 모든 타깃

• 타겟 유형

  (우선 순위 별 배치)
  - ByRole
  - ByLabelText
  - ByPlaceholderText
  - ByText
  - ByDisplayValue
  - ByAltText
  - ByTitle
  - ByTestId

(꿀팁) 만약 ByRole을 선언했는데, 어떤 롤인지 내가 모르겠다면—> 일부러 오류를 내면 테스트로그에서 어떤 role인지 알려준다. 혹은 byrole이 아닌 다른 타켓을 사용해도 된다.

수많은 쿼리중에 어느쿼리를 사용해야 할지 고민이 된다면 우선순위별로 사용할 것을 권장하고 있다.

(롤확인은 여기서)
https://www.w3.org/TR/wai-aria/#role_definitions

4. Action : 이벤트를 발생

이벤트를 호출하는 두 api 중 되도록 userEvent를 사용할 것을 권장하는 데요, 이 api는 내부적으로 fireEvent를 사용하며 실제 유저의 행동과 흡사한 기능을 추가로 제공하기 때문이다.

5. Assertion : expect메서드를 활용하여 타겟을 인자로 넘겨사용

(검증메서드는 여기서 확인)
https://jestjs.io/docs/expect