Global object mocking

어떤 오류가 발생했나?

사건의 경위는 이렇다. 글로벌 객체의 프로퍼티라서 어디서든 사용이 가능한 객체를, 하나의 컴포넌트에서 모킹했다. 나머지 컴포넌트들도 줄줄이 오류를 뿜었다. 심지어 테스트가 동작할 때 마다, 오류를 뿜는 테스트가 달랐다.

어떻게 해결했나?

일단, 모든 컴포넌트에서 모킹을 해줄 필요는 없었다. 해당 컴포넌트를 사용하는 상위 컴포넌트에서만 동일한 모킹을 추가하니, 모든 경고가 사라지게 되었다.

Overrapping act calls

어떤 문제가 발생했나?

문제 발생 지점

  it('get next question when user click yes or no button', () => {
    const { getByText } = render(<YesNoContainer />);

    [yesButton, noButton].forEach(async (button) => {
      dispatch.mockClear();

      fireEvent.click(getByText(button));

      await waitFor(() => { // <---- 여기서 발생한다. 
        expect(dispatch).toBeCalledWith(stopYesNoQuestion());
        // expect(dispatch).toBeCalledWith(getNextYesNoQuestion());
        // expect(dispatch).toBeCalledWith(idlePlaying());
      });
    });
  });

왜 발생했나?

말 그대로 waitFor 의 overraping 을 허용하지 않아서 발생했다.
forEach 로 호출할 경우, waitFor 가 중첩되어 호출된다. await 이 있다고 해서 한번 기다리고 한번 더 호출하는 게 아니다!