React Testing Library - 렌더링 검증

render 함수

- component를 render
- document.body 에 붙인다

반환값

query objects

- render 된 DOM에서 특정 element를 조회할 때 사용
- screen 을 불러와서 사용 가능
- 공식문서-queries

container

React component가 render 된 DOM Node, div

baseElement

container 가 들어가 있는 DOM Node 기본 값은 document.body

rerender

props를 변경하여 component update 를 처리할 때 사용

unmount

1. component를 unmount 시킬 때
2. 메모리 누수를 유발하는 event handler를 남겨두는 테스트 시도 시 유용

renderHook

- hook을 테스트하는 함수
- hook은 function component 안에서만 호출되어야 한다
- hook을 테스팅하기 위해서는

• Dummy wrapper component 안에서 테스트
• 실제 사용되는 component 테스트에서 수행
• renderHook 함수 안에 callback으로 hook을 넣고 테스트

test('Check isOpen updated when setOpen is called', () => {
    // arange
    const { result } = renderHook(() => useOpen())
    expect(result.current.open).toBe(false)
    // act
    act(() => result.current.setOpen(true))
    // assert
    expect(result.current.open).toBe(true)
});

renderHook - context 검증

- customHook이 ContextAPI, redux의 dispatch 같은 context를 사용하는 경우
- renderHook 두 번째 parameter에 ContextProvider wrapper를 제공

test('should use custom step when incrementing', () => {
    const wrapper: React.FC = ({ children }) => (
        {children}
    )
    const { result } = renderHook(() => useCounter(), { wrapper })

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

    expect(result.current.count).toBe(2)
});

renderHook - async 검증

- customHook이 async 동작을 수행할 때에
- setTimeout을 쓰는 경우 => jest의 fakeTimer 사용. 설정과 해지 적용 필요

describe('useCounter with async test', () => {
    beforeEach(() => {
        jest.useFakeTimers()
    })
    afterEach(() => {
        jest.runOnlyPendingTimers()
        jest.useRealTimers()
    })
    test('should increment counter after delay', async () => {
        const { result } = renderHook(() => useCounter())

        result.current.incrementAsync()

        await act(() => jest.runAllTimers())

        expect(result.current.count).toBe(1)
    })
})