import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
 render(<App />); *// render api function*
 const linkElement = screen.getByText(/learn react/i);
 expect(linkElement).toBeInTheDocument();
});

설명

• DOM에 컴포넌트를 렌더링하는 함수
• 인자로 렌더링할 React 컴포넌트가 들어감
• 반환값은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴 (Destructuring(구조분해할당) 문법으로 원하는 쿼리 함수만 얻어올 수 있다.)

소스 코드가 복잡해지면 구조분해할당 사용 비추천! screen 객체를 사용하기, 왜냐하면 사용해야 할 쿼리가 많아질 수록 코드가 복잡해질 수 있다.

// 사용해야 할 쿼리가 많아지면 A 보다는 B 방법을 추천

// (A)
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
// (B)
render(<App />);
const linkElement = screen.getByText(/learn react/i);

API | Testing Library

wrapper

render 의 options중 하나로, React 컴포넌트를 wrapper 옵션으로 전달하여 Provider와 같은 내부 요소 주위에 렌더링 되도록 합니다.

이는 Common Data Provider를 위한 재사용 가능한 Custom render 를 만드는데 가장 유용합니다.

export default function App() {
  return (
    <Container>
      <OrderContextProvider>
				<OrderPage />
      </OrderContextProvider>
    </Container>
  );
}

// Type.test.js

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

test("Type test...", () => {
	render(<Type orderType="products" />, { wrapper: OrderContextProvider });
})

*Type 컴포넌트에서 OrderContextProvider 컴포넌트의 전역 state인 createContext()를 통해 state를 참조하여 사용하기 때문에 wrapper를 통해 선언해 주어야 한다.*

Custom render

Global Context Provider 나 데이터 저장소 등과 같은 항목들은 Custom render를 정의하여 사용하는 것이 종종 유용합니다.