Package Exports

react-select-event

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

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

const { getByRole, getByLabelText } = render(
  <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>
    <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>
    <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"] });

`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>
    <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.

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

Clears the first value in the dropdown.

const { getByRole, getByLabelText } = render(
  <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>
    <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 }]} />
  </form>
);
expect(queryByText("Pizza")).toBeNull();
await selectEvent.openMenu(getByLabelText("Food"));
expect(queryByText("Pizza")).toBeInTheDocument();

Credits

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