테스트 코드 문법 공부하기

테스트 코드 문법

Jest

1. 특정한 동작을 수행한다.

2. 동작을 수행한 결과가 기대한 상황과 일치하는지 판단한다.

1. 특정한 동작을 수행한다.

2. matcher 함수를 통해 실제 결과와 기대값이 맞는지 검증한다.

test("2+2는 4다.", () => {
	expect(2 + 2).toBe(4);
});

matcher

• toBe: expect의 인자가 toBe의 인자와 일치하는지 검사합니다.

• toEqual: 객체가 동일한지 판단 해줍니다.

• toBeNull, toBeUndefined

• toContain: 특정한 요소를 포함하고 있는지 검사합니다.

• not: matcher의 기대값을 반대로 변경해줍니다.
• ex. not.toBe(4) → 4가 아니길 기대한다.

beforeEach, beforeAll, afterEach, afterAll

• before 키워드: 테스트 전 작업 수행

• after 키워드: 테스트 후 작업 수행

• beforeEach, afterEach
• 테스트 마다 반복 실행이 필요한 작업
• 동일 레벨 또는 하위 레벨의 테스트가 실행 될 때 마다 반복적으로 실행

• beforeAll, afterAll
• 딱 한번 실행이 필요한 작업
• 동일 레벨 또는 하위 레벨의 테스트가 실행 될 때 딱 한번만 실행

beforeAll(() => {
  return initializeCityDatabase();
});

afterAll(() => {
  clearCityDatabase();
});

Jest 사용법 (6) - 테스트 전후 설정 (Setup & Teardown)

JavaScript 테스팅 도구인 Jest의 사용법입니다. 테스트 전후 반복되는 작업 설정을 다뤄봤습니다.

https://velog.io/@modolee/jest-user-guide-06

RTL

1. 테스트할 화면을 렌더링 한다.

2. 특정한 동작을 수행한다. (클릭 같은 이벤트 등)

3. 동작을 수행한 결과가 기대한 상황과 일치하는지 판단한다.

render

import {render} from '@testing-library/react'

render(<header />)

getBy, findBy, queryBy

• getBy~~~ : 해당 요소가 현재 DOM상에 있는지 동기적으로 확인합니다. 만약 찾는 요소가 없을 경우 예외를 던집니다.

• findBy~~~ : 해당 요소가 현재 DOM상에 있는지 비동기적으로 확인합니다. 해당 요소를 찾기 위해 일정 시간을 기다리며, 시간이 지난 후에도 찾을 수 없는 경우 예외를 던집니다.

• queryBy~~~ : getBy와 동일하게 동작하지만 찾는 요소가 없을 경우 예외를 던지는 것이 아닌 null을 반환합니다.

• getByRole

• getByText

• getByLabelText

• getByPlaceholderText

• getByDisplayValue

• getByAltText

• getByTitle

• getByTestId

const buttonElement = screen.getByText(/퀴즈 풀러 가기/i);

Cheatsheet | Testing Library

A short guide to all the exported functions in DOM Testing Library

https://testing-library.com/docs/dom-testing-library/cheatsheet/

fireEvent, userEvent

userEvent.click(buttonElement);

[react-testing-library] fireEvent vs userEvent

userEvent, fireEvent 차이를 알아보자 fireEvent React Testing Library에서 제공하는 유틸리티 함수 중 하나로 테스트 중에 이벤트를 발생시키는 데 사용한다. React 컴포넌트를 테스트할 때 사용자 동작을 모의하고 특정 이벤트

https://velog.io/@pds0309/react-testing-library-fireEvent-vs-userEvent

마무리

References

Jest로 기본적인 테스트 작성하기

Engineering Blog by Dale Seo

https://www.daleseo.com/jest-basic/