[React Test] React Context 적용

React Context를 이용한 상품 가격 처리

• 리액트에서 데이터 흐름 컨트롤하는 법 (state 관리하기)
  1. state와 props를 사용해 컴포넌트 간 전달
  2. React Context 사용
  3. mobx 사용
  4. redux 사용

context 사용해서 컴포넌트에 데이터 제공하기

Context - React

1. Context 생성
2. Context는 Provider 안에서 사용가능하기 때문에 Provider 생성
3. 더 복잡한 로직을 구현하기 위해 Provider를 위한 함수 생성
4. OrderContextProvider 함수로 orderContext 사용할 컴포넌트 감싸기
5. orderContext 사용하기

자세한 사용법은 문서 참고!

context wrapper 추가로 테스트 에러 제거

테스트를 진행하면 render로 불러온 컴포넌트에는 provider가 적용돼있지 않아 오류가 발생한다.

따로 지정을 해주어야 함.

render(<Type orderType="products" />);

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

하지만 모든 테스트에 대해 wrapper를 각각 적용하는 것은 비효율적이다.

모든 테스트 케이스를 wrapper로 감싸주기

Custom Render를 만들어서 사용한다.

// test-utils.js
import { render } from "@testing-library/react";
import { OrderContextProvider } from "./contexts/OrderContext";

const customRender = (ui, options) => 
    render(ui, {wrapper: OrderContextProvider, ...options})

export * from '@testing-library/react'

export {customRender as render}

이후 기존에 testing-library/react에서 불러왔던 {render, screen} 등을 위 파일에서 불러오도록 지정한다.