RTL) Avoid using side effects within `waitFor` callback

RTL 학습 중 "not wrapped in act ..." 오류가 발생하여 테스트 코드를 waitFor로 감싸버렸다.

"not wrapped in act ..."의 오류는 사라졌지만, Avoid using side effects within 'waitFor' callback [eslinttesting-library/no-wait-for-side-effects] 오류가 생겼다.

따라서 해당 오류를 정리한다.

[github] testing-library/no-wait-for-side-effects 의 rule에 따르면

This rule aims to avoid the usage of side effects actions (fireEvent, userEvent or render) inside waitFor. Since waitFor is intended for things that have a non-deterministic amount of time between the action you performed and the assertion passing, the callback can be called (or checked for errors) a non-deterministic number of times and frequency. This will make your side-effect run multiple times.

콜백에서 불확실한 횟수와 빈도로 호출(또는 오류 확인)될 수 있어 side effect가 여러번 발생 가능하기 때문에 side effect가 콜백으로 waitFor 내부에서 작동되면 안된다.

오류가 발생한 코드

test("to enable confirmButton when checkbox checked", async () => {
  const user = userEvent.setup();
  await waitFor(async () => {
    render(<SummaryForm />);

    const checkbox = screen.getByRole("checkbox", {
      name: /terms and condition/i,
    });

    const confirmButton = screen.getByRole("button", {
      name: "Confirm Order",
    });

    await user.click(checkbox);

    expect(checkbox).toBeChecked();
    expect(confirmButton).toBeEnabled();
  });
});

해결한 코드

test("to enable confirmButton when checkbox checked", async () => {
  const user = userEvent.setup();
    render(<SummaryForm />);

    const checkbox = screen.getByRole("checkbox", {
      name: /terms and condition/i,
    });

    const confirmButton = screen.getByRole("button", {
      name: "Confirm Order",
    });

    user.click(checkbox);
    await waitFor(function () {
       expect(checkbox).toBeChecked();
    )};
    expect(confirmButton).toBeEnabled();
  });

useEvent await 제거, onchange 이벤트로 act Error가 발생하는 checkbox에 waitFor 감싸기

---

Reference)
https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md