React TDD 테스트 케이스 별 구현 방법

 

주로 사용하는 케이스만 작성하였습니다.

 

 

테스트 대상 조회

 

1. getByTestId : data-testid로 조회

<div data-testid="title" className="title">
...
// test.ts
screen.getByTestId('title')

 

 

2. geByText : text로 조회

<div className="title">제목</div>
...
// test.ts
screen.getByText('제목')

 

 

3. geByRole : role로 조회

<div role="title">제목</div>
...
// test.ts
screen.getByRole('제목')

 

 

4. getAllByText, getAllByTestId, getAllByRole... : 해당 요소들을 전부 조회

- 결과값은 배열입니다.

<div data-testid="title">제목</div>
<div data-testid="title">두번째 제목</div>
<div data-testid="title">세번째 제목</div>
...
// test.ts
screen.getAllByTestId('제목')

 

 

---

데스트 케이스 구현

 

1. toBeInTheDocument : Document(화면)안에 해당 요소가 있는가?

<div data-testid="title" className="title">
...
// test.ts
screen.getByTestId('title').toBeInTheDocument()
screen.getByTestId('title').not.toBeInTheDocument() // Document 안에 있지 않다.

 

 

2. toBeCalledWith : 브라우저 주소가 해당 주소로 호출 되었는가?

- 보통 해당 버튼을 클릭했을 경우 router 이동에 대한 테스트

- useNavigate 도 mock function으로 정의합니다.

 

setupTest.ts

import '@testing-library/jest-dom';
// mock useNavigate
const mockUseNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockUseNavigate,
}));
global.mockUseNavigate = mockUseNavigate;

 

fireEvent.click(screen.getByTestId('move-button'));
expect(global.mockUseNavigate).toBeCalledWith('/todo/2');

 

 

3. toEqual : 해당 요소가 동일한가?

- getAllBy...로 조회한 요소의 length를 비교할때와 같이 동일한 값을 비교할때 사용합니다.

<div className="title">할일</div>
<div className="title">할일</div>
 
const title = screen.getAllByText('할일');
expect(title.length).toEqual(2);

 

 

4. toBeChecked: 해당요소(체크 요소가 있는 element, ex. checkBox)가 체크 되었는가?

const checkbox = screen.getByTestId('checkbox');
fireEvent.click(checkbox);
await waitFor(() => expect(checkbox).toBeChecked());