Skip to content

🦗 Simulate react-select events for react-testing-library

License

Notifications You must be signed in to change notification settings

vndly-oss/react-select-event

 
 

Repository files navigation

react-select-event

cricket

Simulate user events on react-select elements, for use with react-testing-library.



npm version Build Status Coverage report code style: prettier

Install

npm install --save-dev react-select-event

Import react-select-event in your unit tests:

import selectEvent from "react-select-event";
// or
const selectEvent = require("react-select-event");

Supported versions of react-select

This library is tested against all versions of react-select starting from 2.1.0.

API

Every helper exported by react-select-event takes a handle on the react-select input field as its first argument. For instance, this can be: getByLabelText("Your label name").

select(input: HTMLElement, optionOrOptions: string | RegExp | Array<string | RegExp>, config?: object): Promise<void>

Select one or more values in a react-select dropdown.

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Select options={OPTIONS} name="food" inputId="food" isMulti />
  </form>
);
expect(getByTestId("form")).toHaveFormValues({ food: "" });

await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"]);
expect(getByTestId("form")).toHaveFormValues({ food: ["strawberry", "mango"] });

await selectEvent.select(getByLabelText("Food"), "Chocolate");
expect(getByTestId("form")).toHaveFormValues({
  food: ["strawberry", "mango", "chocolate"]
});

This also works for async selects:

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Async
      options={[]}
      loadOptions={fetchTheOptions}
      name="food"
      inputId="food"
      isMulti
    />
  </form>
);
expect(getByTestId("form")).toHaveFormValues({ food: "" });

// start typing to trigger the `loadOptions`
fireEvent.change(getByLabelText("Food"), { target: { value: "Choc" } });
await selectEvent.select(getByLabelText("Food"), "Chocolate");
expect(getByTestId("form")).toHaveFormValues({
  food: ["chocolate"]
});

select also accepts an optional config parameter. config.container can be used to specify a custom container to use when the react-select dropdown is rendered in a portal using menuPortalTarget:

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Select
      options={OPTIONS}
      name="food"
      inputId="food"
      isMulti
      menuPortalTarget={document.body}
    />
  </form>
);
await selectEvent.select(getByLabelText("Food"), ["Strawberry", "Mango"], {
  container: document.body
});
expect(getByTestId("form")).toHaveFormValues({ food: ["strawberry", "mango"] });

create(input: HTMLElement, option: string, config?: object): Promise<void> }

Creates and selects a new item. Only applicable to react-select Creatable elements.

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Creatable options={OPTIONS} name="food" inputId="food" />
  </form>
);
expect(getByTestId("form")).toHaveFormValues({ food: "" });
await selectEvent.create(getByLabelText("Food"), "papaya");
expect(getByTestId("form")).toHaveFormValues({ food: "papaya" });

create take an optional config parameter:

clearFirst(input: HTMLElement): Promise<void>

Clears the first value in the dropdown.

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Creatable
      defaultValue={OPTIONS[0]}
      options={OPTIONS}
      name="food"
      inputId="food"
      isMulti
    />
  </form>
);
expect(getByTestId("form")).toHaveFormValues({ food: "chocolate" });
await selectEvent.clearFirst(getByLabelText("Food"));
expect(getByTestId("form")).toHaveFormValues({ food: "" });

clearAll(input: HTMLElement): Promise<void>

Clears all values in the dropdown.

const { getByTestId, getByLabelText } = render(
  <form data-testid="form">
    <label htmlFor="food">Food</label>
    <Creatable
      defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
      options={OPTIONS}
      name="food"
      inputId="food"
      isMulti
    />
  </form>
);
expect(getByTestId("form")).toHaveFormValues({
  food: ["chocolate", "vanilla", "strawberry"]
});
await selectEvent.clearAll(getByLabelText("Food"));
expect(getByTestId("form")).toHaveFormValues({ food: "" });

Credits

All the credit goes to Daniel and his StackOverflow answer: https://stackoverflow.com/a/56085734.

About

🦗 Simulate react-select events for react-testing-library

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 96.5%
  • JavaScript 3.5%