react-select-event icon indicating copy to clipboard operation
react-select-event copied to clipboard

react-select-event results in very long-running tests

Open josephkmh opened this issue 2 years ago • 7 comments

First of all thank you very much for this library, it simplifies testing with react-select immensely!

Recently I rewrote many of our old tests using react-select-event, but noticed that test runtime went up by a factor of 5 or more. On my local machine tests are taking 5-12 seconds to run, on CI servers up to 30 seconds. This adds up quickly!

We're using formik and react-select for both single and multi-select dropdowns.

Here is a distilled example of one such test:

it("submits the correct values", async () => {
  const submitStep = jest.fn();

  const values = {
    name: "ACME corporation",
    industries: "Finance",
    city: "Berlin",
    country: "Deutschland",
    postalCode: "10000",
  };

  render(
    <CompanyNameAndIndustry
      submitStep={submitStep}
      initialValues={{
        name: "",
        industries: "",
        city: "",
        country: "",
        postalCode: "",
      }}
    />
  );

  userEvent.type(screen.getByLabelText("Name des Unternehmens*"), values.name);
  await selectEvent.select(screen.getByLabelText("Branche"), values.industries);
  userEvent.type(screen.getByLabelText("Ort*"), values.city);
  userEvent.type(screen.getByLabelText("Postleitzahl*"), values.postalCode);
  await selectEvent.select(screen.getByLabelText("Land"), values.country);
  userEvent.click(screen.getByText("Weiter"));

  await waitFor(() => expect(submitStep).toHaveBeenCalledWith(values));
});

When I remove the selectEvent.select() calls, the runtime goes back down to <1 second.

My questions:

  • Is there anything obvious that I'm doing wrong here?
  • Is it expected that tests should take drastically longer?
  • Is there any way to optimize this?

josephkmh avatar Jul 29 '21 10:07 josephkmh