🐙 리액트 테스팅 기본(with. Testing Library)

1. Testing Library

@testing-library는 사용자 중심 UI 컴포넌트 테스트에 도움을 주는 라이브러리 집합이다.

1-1. Core API(React Testing Library)

테스트는 컴포넌트의 요소를 선택한 후, 이벤트 API나 user-event를 사용하여 이벤트를 발생시키고 페이지와의 상호작용을 시뮬레이션하거나 요소에 대한 assertion을 만들 수 있다.

1-1-1. 쿼리함수

1-1-1-1. prefix(get, find, query)

• query로 시작하는 함수는 일치하는 요소가 없는 경우 null 또는 빈 배열(queryAll인 경우)을 반환한다(get, find로 시작하는 함수는 에러를 반환)
• find로 시작하는 함수는 Promise를 반환하여서 서버와의 통신이 필요한 UI 컴포넌트의 경우 사용된다(1초 후에도 요소가 없으면 reject된다. get, query로 시작하는 함수는 요소를 반환한다.)

1-1-1-2. suffix

쿼리함수의 suffix로는 role, labelText, placeholderText, text, displayView, altText, title, testid를 선택할 수 있다

• getByRole: 접근성 트리에 노출된 모든 요소를 쿼리하는데 사용한다. getByRole("button", {name: /submit/i})의 형태를 가장 많이 사용한다.
• getByLabelText: 폼 필드에서 주로 사용. label text를 사용하여 요소를 찾는다.
• getByPlaceholderText
• getByText: 비대화형 요소인 div, span 등을 찾는데 사용되며, 폼 외부에서 사용자가 요소를 찾는 주요 방법이다.
• getByDisplayValue: 채워진 값이 있는 페이지를 탐색할 때 유용하다.
• getByAltText: 요소가 alt 텍스트를 지원하는 경우 사용
• getByTitle

1-1-1-3. 쿼리함수의 사용

쿼리 함수는 기본적으로 첫번째 인수에 container DOM을 전달해야 한다.

Testing library에서는 screen을 통해서 쿼리 함수를 사용할 수도 있다.

import {screen, getByLabelText} from '@testing-library/dom';

// with screen
const inputNode1 = screen.getByLabelText("Username");

// without screen
const inputNode2 = getByLabelText(document.querySelector("#app"), 'Username');

1-1-1-4. Text Match

• string으로 매칭하는 방법
  screen.getByText('Hello World', {exact: false}); // true인 경우 full match, false인 경우 substring match or ignore case
• 정규식으로 매칭하는 방법
  screen.getByText(/Hello World/i)
• 함수로 매칭하는 방법
  screen.getByText((content, element) => content.startsWith("Hello"))

1-1-1-5. Helper 함수

• logRoles
  DOM 노드 트리 내의 모든 암묵적 ARIA 역할 목록을 출력하는데 사용할 수 있다.

import { logRoles } from '@testing-library/dom';

logRoles(document.createElement("nav"));

1-1-1-6 context API

contextAPI를 사용하는 경우, 해당 설정을 적용해야 한다.

// test-utility.tsx
import {render, RenderOptions} from '@testing-library/react'
import {ThemeProvider} from 'my-ui-lib'
import {TranslationProvider} from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'

// 예시
const AllTheProviders = ({children}: {children: React.ReactNode}) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  )
}

// render 함수에 AlltheProviders가 wrapping 된다.
// test 파일에서 render를 import할 때, @testing-library/react가 아닌 test-utility.tsx를 import해서 사용하면 된다.
const customRender = (
	ui: ReactElement,
    options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, {wrapper: AlltheProviders, ...options})

1-1-1-7. render 함수

테스트 할 컴포넌트를 매개변수로 전달한다.

반환되는 { container }는 logRoles를 통해 표시될 수 있다.

const {container} = render(<Options />);
logRoles(container);

1-2. @testing-library/user-event

@testing-library/user-event는 브라우저에서 상호작용이 발생할 경우, 발생하는 이벤트를 전송하여 사용자 상호작용을 시뮬레이션하는 보조라이브러리이다.

1-2-1. fireEvent와의 차이점

fireEvents는 브라우저의 저수준 dispatchEvent API Wrapper로, 개발자가 모든 요소에서 모든 이벤트를 트리거할 수 있다. 문제는 브라우저가 일반적으로 하나의 상호작용에 대해 하나 이상의 이벤트를 트리거한다는 것이다.

user-event는 구체적인 사용자의 상호작용을 발생시킬 수 있다. 그래서 user-event를 사용하는 것이 좋다.
아직 구현되지 않은 이벤트들이 있는데 이러한 경우는 fireEvent를 사용하면 된다.

1-2-2. user-event 사용하는 방법

import userEvent from '@testing-library/user-event';

it("test", async () => {
	// render 하기 전에 호출
	const user = userEvent.setup();
    
    render(<MyComponent />);
    
    const element = screen.getByRole("button", {name: /click/i});
    // user event는 Promise를 반환한다
    await user.click(element);
    
})

user.Type 함수는 입력 가능한 요소에 입력할 수 있다.
user.clear 함수는 편집 가능한 요소를 쉽게 지울 수 있다.

it("test", () => {
	const user = userEvent.setup();
    ...
    const element = screen.getByRole("textbox")
    await user.clear(element);
    await user.type(element, 'new Text!');
    
})

user.click 함수는 element를 클릭할 수 있다

추가 함수는 여기서 확인하면 된다.

1-3. @testing-library/jest-dom

jest-dom은 Jest에 대한 사용자 정의 DOM 요소 매처를 제공하는 Testing Library 중 하나이다.

사용하는 곳에서 import '@testing-library/jest-dom'를 한다.

test(웹 페이지의 눈에 보이는 요소들을 테스트), it, description, expect 등의 함수를 이 라이브러리를 통해 사용할 수 있다

1-4. 기타 라이브러리

eslint-plugin-testing-library, eslint-plugin-jest-dom 는 사용자가 모범 사례를 따르고 일반적인 실수를 예측하는데 도움이 되는 ESLint 플러그인

참고: eslint-plugin-testing-library, eslint-plugin-jest-dom

2. Vitest

Vite로 구동되는 테스트러너

2-1. Test API

• test(it): 코드를 테스트(UI는 jest-dom)
  • .extend
  • .skip: 테스트의 실행을 건너뜀
  • .skipIf
  • .runIf: skipIf의 반대
  • .only: 특정 테스트만 실행
  • .concurrent
  • .sequential
  • .todo: 나중에 구현할 테스트
  • .fails: 실패할 것임을 명시적으로 표시
  • .each
  • .for
• bench: 이 함수를 여러번 실행하여 다양한 성능 결과를 표시
  • .skip
  • .only
  • .todo
• describe
  • .skip
  • .skipIf
  • .runIf
  • .only
  • .concurrent
  • .sequential
  • .shuffle
  • .todo
  • .each
  • .for
• beforeEach
• afterEach
• beforeAll
• afterAll
• onTestFinished
• onTestFailed

2-2. Expect

• toBe
• toBeDefined
• toBeUndefined
• toBeTruthy
• toBeFalsy
• toBeNull
• toBeNaN
• toBeGreaterThan
• toEqual
• toMatch
• ...

2-3. config

// vite.config.ts
...
export defineConfig({
  ...
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/setupTests.js",
    // you might want to disable the `css: true` line, since we don't have
    // tests that rely on CSS -- and parsing CSS is slow.
    // I'm leaving it in here becasue often people want to parse CSS in tests.
    css: true,
  },
  ...
})

3. MSW

테스트에서 API를 모킹하기 위해서 사용한다.

// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  // Intercept "GET https://example.com/user" requests...
  http.get('https://example.com/user', () => {
    // ...and respond to them using this JSON response.
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

// setupTests.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
 
const server = setupServer(...handlers)
 
beforeAll(() => {
  // Start the interception.
  server.listen()
})
 
afterEach(() => {
  // Remove any handlers you may have added
  // in individual tests (runtime handlers).
  server.resetHandlers()
})
 
afterAll(() => {
  // Disable request interception and clean up.
  server.close()
})

참고

테스트 할 때, 중첩을 지양하자
Testing Library
Vitest
Mock Service Worker