react-select-event

What is react-select-event?

The react-select-event package is a utility for testing React Select components with ease. It provides a set of functions to simulate user interactions with React Select components, making it easier to write tests for applications that use these components.

What are react-select-event's main functionalities?

selectOption

The `selectOption` function allows you to simulate selecting an option from a React Select component. This is useful for testing scenarios where you need to verify that the correct option is selected based on user interaction.

const { select } = require('react-select-event');
const { render, screen } = require('@testing-library/react');
const React = require('react');
const Select = require('react-select');

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

render(<Select options={options} />);
await select(screen.getByLabelText('Select...'), 'Chocolate');

clearFirst

The `clearFirst` function allows you to simulate clearing the first selected option in a multi-select React Select component. This is useful for testing scenarios where you need to verify that the correct options are cleared based on user interaction.

const { clearFirst } = require('react-select-event');
const { render, screen } = require('@testing-library/react');
const React = require('react');
const Select = require('react-select');

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

render(<Select options={options} isMulti />);
await select(screen.getByLabelText('Select...'), 'Chocolate');
await select(screen.getByLabelText('Select...'), 'Vanilla');
await clearFirst(screen.getByLabelText('Select...'));

createNewOption

The `createNewOption` function allows you to simulate creating a new option in a Creatable React Select component. This is useful for testing scenarios where you need to verify that new options can be added based on user interaction.

const { createNewOption } = require('react-select-event');
const { render, screen } = require('@testing-library/react');
const React = require('react');
const CreatableSelect = require('react-select/creatable');

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

render(<CreatableSelect options={options} />);
await createNewOption(screen.getByLabelText('Select...'), 'Mint');

Other packages similar to react-select-event

@testing-library/user-event

@testing-library/user-event is a package that provides utilities to simulate user interactions with DOM elements. It is more general-purpose compared to react-select-event and can be used to test a wide range of user interactions beyond just React Select components.

react-testing-library

react-testing-library is a lightweight solution for testing React components. It encourages testing components in a way that resembles how they are used by end-users. While it does not provide specific utilities for React Select components, it can be used in conjunction with user-event to achieve similar results.

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.