모듈을 dynamic import 로 불러오는 경우를 test 할 때는 일반적인 test 방법을 사용할 경우 test 가 통과하지 않는다.
이유는 suspense 에서 fallback 에 지정한 요소를 render 하고 , testingLibrary 에서는 해당 render 한 부분만을 확인하여 정상적으로 module 을 불러온 것에 대해서 test 가 되지 않았기 때문이다.
describe('path 가/todos 이면', () => {
it('todo 등록 form 출력', async () => {
renderApp({ path: '/todos' })
await waitForElementToBeRemoved(()=>screen.queryByTestId('Loading'))
expect(screen.getByRole('heading')).toBeInTheDocument()
expect(screen.getByTestId('TodoForm')).toBeInTheDocument()
})
})
describe('path 가/todos/:id 이면', () => {
beforeEach(() => {
mockUseTodoState.mockImplementation(() => [{ ...todo, id: 3 }])
})
it('todo 등록 form 출력', async () => {
renderApp({ path: '/todos/3' })
await waitForElementToBeRemoved(()=>screen.queryByTestId('Loading'))
expect(screen.getByRole('heading')).toBeInTheDocument()
expect(screen.getByTestId('TodoForm')).toBeInTheDocument()
})
})
위의 예시 처럼 특정 test 가 먼저 module 을 불러올 경우 suspense 의 fallback 요소가 rendering 되지 않아 await waitForElementToBeRemoved()
에서 test 가 실패하기 때문에
describe('path 가/todos 이면', () => {
it('todo 등록 form 출력', async () => {
renderApp({ path: '/todos' })
await screen.findByRole('heading')
expect(screen.getByRole('heading')).toBeInTheDocument()
expect(screen.getByTestId('TodoForm')).toBeInTheDocument()
})
})
describe('path 가/todos/:id 이면', () => {
beforeEach(() => {
mockUseTodoState.mockImplementation(() => [{ ...todo, id: 3 }])
})
it('todo 등록 form 출력', async () => {
renderApp({ path: '/todos/3' })
await screen.findByRole('heading')
expect(screen.getByRole('heading')).toBeInTheDocument()
expect(screen.getByTestId('TodoForm')).toBeInTheDocument()
})
})
test 할요소를 찾을 때 까지 기다린 후 test expect 로 test 해야 정상적으로 test 를 진행할 수 있다.
실제 testingLibrary 제작자인 kentcdodds
도 위의 방법을 추천한다.
참고