Как победить ошибку act в react testing library?

Question

[Кирилл]

Учусь тестировать react. есть простейший тест, и код его проходит:

тест

it("button should be enabled when checkbox is checked and other way around", () => {
    render(<SummaryForm />);

    const checkbox = screen.getByRole("checkbox", {
      name: /terms and conditions/i,
    });
    const button = screen.getByRole("button", {
      name: /confirm order/i,
    });

    userEvent.click(checkbox);

    expect(checkbox).toBeChecked();
    expect(button).toBeEnabled();

    userEvent.click(checkbox);

    expect(checkbox).not.toBeChecked();
    expect(button).toBeDisabled();
  });

код

<Form>
      <Form.Group controlId="terms-and-conditions">
        <Form.Check
          type="checkbox"
          checked={checked}
          label={label}
          value={checked}
          onChange={() => setChecked(!checked)}
        />
        <Button disabled={!checked}>confirm order</Button>
      </Form.Group>
    </Form>

Но, в консоли появляется ошибка:



Я поресечил интернет и понял 2 вещи:
1. В act оборачивать не нужно, потому что userEvent имеет эту обертку внутри себя
2. Такая ошибка возникает обычно при работе с асинхронщиной, которой у меня в коде нет.

В чем же тогда дело и как это правильно решать?

Comments

[WbICHA]

Разве клик не промис возвращает?

[Кирилл]

it("button should be enabled when checkbox is checked and other way around", async () => {
    render(<SummaryForm />);

    const checkbox = screen.getByRole("checkbox", {
      name: /terms and conditions/i,
    });
    const button = screen.getByRole("button", {
      name: /confirm order/i,
    });

    await userEvent.click(checkbox);

    expect(checkbox).toBeChecked();
    expect(button).toBeEnabled();

    await userEvent.click(checkbox);

    expect(checkbox).not.toBeChecked();
    expect(button).toBeDisabled();
  });

Я уже пробовал поменять на такое, но ошибки в консоли остаются