React Testing - Provider, Hook

Provider

• Theme, Recoil 등 Provider로 컴포넌트를 감싸야 하는 경우가 생길수 있다.
• 렌더링이 원하는대로 되지 않을수 있다.
• render 함수의 두번째 argument 로 객체를 주어 wrapper에 Provider를 제공한다.

render(<MuiMode />, { wrapper: AppProvider })

import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const theme = createTheme({
  palette: {
    mode: 'dark',
  },
})

export const AppProviders = ({ children }: { children: React.ReactNode }) => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}
// AppProvider 내용.

---

Custom Render function

• 기본적으로 Provider로 래핑된 render 함수를 만들수 있다.

1. https://testing-library.com/docs/react-testing-library/setup 의 custom render를 복사한다.
2. 원하는대로 수정한다.
3. 수정된 파일로부터 render를 import해 사용한다.
   

• example 파일의 아래 코드 덕분에 render를 제외한 나머지도 import 할수 있다.

export * from '@testing-library/react'

---

useCounter

export const useCounter = ({ initialCount = 0 }: UseCounterProps = {}) => {
  const [count, setCount] = useState(initialCount)
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)
  return { count, increment, decrement }
}

Custom React Hook 테스트

• hook는 Element를 리턴하지 않기에 render를 사용할수 없다.
• renderHook 를 사용한다.

test('', () => {
	const { result } = renderHook(useCounter)
    // result.current 에 리턴되는 값이 들어간다.
    
    expect(result.current.count).toBe(0);
    // count가 0인지 테스트하는것
})

• 두번째 인자로 객체를 전달해 react hook 의 prop을 전달할수 있다.

renderHook(useCounter, { initialProps: { initialCount: 0 } })

Custom React Hook에 리턴되는 함수 테스트하기

• 이런식으로 직접 호출하면 에러가 발생한다.
  • act로 감싸라고 한다.

act(() => {
	result.current.increment();
})

• 위와 같이 act 와 함수로 감싸면 정상적으로 실행된다.