react 16.8 -> 16.9 업그레이드로 인한 react-testing-library 실패 해결

팀 내 react 16.8 버전을 이번에 npm7로 버전 업하면서 함께 16.9로 올렸다.

 

그런데 올리고 보니 기작성되었던 일부 테스트 케이스들이 실패했다.

 

실패하는 원인을 보니 비동기 실행으로 인해 HTMLElement를 찾기 전에 fireEvent 나 userEvent를 실행해버려서 실패되었다.

 

따라서 아래처럼 HTMLElement도 비동기로 찾게끔 수정하였다.

test('', async () => {
  const container = render(<Home />)
  
  // ... 중략 ...
  
  const button
  
  await waitFor(() => {
    button = findButton(container)
    expect(button).not.toBeUndefined()
  })
  
  fireEvent.click(button)
  
  await waitFor(() => {
    expect(button).toBeEnabled()
  })
})

 

원인

react 16.8과 16.9의 act() 동작이 달랐던 게 원인이었다.

 

16.8에서 test를 실행하면 아래 Warning이 발생한다.

It looks like you 're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least react-dom@16.9.0 to remove this warning.

 

act에 관한 가이드에서 16.8에서 act()는 synchronous로 동작한다고 나와있다. 반면 16.9는 await으로 기다릴 수 있는 awaitable function이다.

 

비동기로 바뀜에 따라 react state를 비동기 함수 내에서 변경하는 코드또한 act를 사용할 수 있게 된 것이다.

 

이전에 16.8버전에서만 동작하는 sync 코드를 짰던 게 문제가 되었다.