Package Exports

react-select-event
react-select-event/lib/react-select-event.cjs.js
react-select-event/lib/react-select-event.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-select-event) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-select-event

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

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: Matcher | Array<Matcher>, config?: object): Promise<void>`

The optionOrOptions parameter can be any valid dom-testing-library TextMatch object (eg. string, regex, function, number).

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

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

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

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

This also works for async selects:

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

// start typing to trigger the `loadOptions`
fireEvent.change(getByLabelText("Food"), { target: { value: "Choc" } });
await selectEvent.select(getByLabelText("Food"), "Chocolate");
expect(getByRole("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 { getByRole, getByLabelText } = render(
  <form role="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(getByRole("form")).toHaveFormValues({ food: ["strawberry", "mango"] });

The container can also be passed in as a function if it needs to be lazily evaluated:

const { getByRole, getByLabelText } = render(
  <form role="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.querySelector("[class$=-menu]"),
});
expect(getByRole("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 { getByRole, getByLabelText } = render(
  <form role="form">
    <label htmlFor="food">Food</label>
    <Creatable options={OPTIONS} name="food" inputId="food" />
  </form>
);
expect(getByRole("form")).toHaveFormValues({ food: "" });
await selectEvent.create(getByLabelText("Food"), "papaya");
expect(getByRole("form")).toHaveFormValues({ food: "papaya" });

create take an optional config parameter:

config.createOptionText can be used when creating elements with a custom label text, using the formatCreateLabel prop.
config.container can be used when the react-select dropdown is rendered in a portal using menuPortalTarget.
config.waitForElement Whether create should wait for new option to be populated in the select container. Defaults to true.

`clearFirst(input: HTMLElement): Promise<void>`

Clears the first value in the dropdown.

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

`clearAll(input: HTMLElement): Promise<void>`

Clears all values in the dropdown.

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

`openMenu(input: HTMLElement): void`

Opens the select dropdown menu by focusing the input and simulating a down arrow keypress.

const { getByLabelText, queryByText } = render(
  <form>
    <label htmlFor="food">Food</label>
    <Select options={[{ label: "Pizza", value: 1 }]} inputId="food" />
  </form>
);
expect(queryByText("Pizza")).toBeNull();
selectEvent.openMenu(getByLabelText("Food"));
expect(getByText("Pizza")).toBeInTheDocument();

Credits

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