react-dom을 사용한 jajest 단위 테스트에서 act()를 사용하는 경우

react-dom을 사용한 jajest 단위 테스트에서 act()를 사용하는 경우

반응 장치 테스트 문서에 따르면:

액트()

어설션을 위한 컴포넌트를 준비하려면 코드를 렌더링하고 act() 호출 내에서 업데이트를 수행합니다.이렇게 하면 브라우저에서 React가 작동하는 방식에 더 가깝게 테스트가 실행됩니다.

하지만 테스트는 두 경우 모두 완벽하게 잘 진행됩니다.

act()를 사용하지 않음

it('Should return some text', () => {
  render(<TestComponent />, container);
  expect(container.textContent).toBe('some text');
});

액트() 포함

it('Should return some text', () => {
  act(() => {
    render(<TestComponent />, container);
  });

  expect(container.textContent).toBe('some text');
})

질문은 다음과 같습니다.act()는 정확히 어떤 역할을 하며, 어떤 경우에 사용해야 합니까?

act() 문서에서:

UI 테스트를 작성할 때 렌더링, 사용자 이벤트 또는 데이터 가져오기 등의 작업을 사용자 인터페이스와의 상호 작용의 "유닛"으로 간주할 수 있습니다.React는 act()라는 이름의 도우미를 제공합니다.이 도우미는 이러한 "유닛"과 관련된 모든 업데이트가 처리되고 DOM에 적용되었는지 확인한 후 어설션을 수행합니다.

자세한 내용 및 예:https://github.com/mrdulin/react-act-examples/blob/master/sync.md

간단히 말하면:

ReactTestUtil의act()렌더링, 사용자 이벤트, 데이터 가져오기 등 시간이 걸릴 수 있는 모든 작업이 테스트 어설션을 실행하기 전에 완료되었는지 확인합니다.

act(() => {
    // render components
    });
    // make assertions

React Testing Library와 같은 라이브러리를 사용하는 경우render함수는 이미 에 싸여 있다.act()일반적으로는 명시적으로 사용할 필요가 없습니다.

React Testing Library에는 자체 사양이 있습니다.act()기능, 단순한 래퍼입니다.ReactTestUtil의act()이는 비동기 상태 업데이트에서 유용할 수 있지만 다음과 같은 다른 React Testing Library 도구에서는 유용합니다.waitFor더 나을지도 몰라

기본적으로 act()는 실제로 동작하는 것과 같은 반응을 시뮬레이션하기 위해 사용됩니다.단, @testing-library/react에서 렌더링을 사용하는 경우 act()가 암묵적으로 포함되어 있습니다.상세한 것에 대하여는, 메뉴얼을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/60113292/when-to-use-act-in-jest-unit-tests-with-react-dom