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");
This library is tested against all versions of react-select
starting from 2.1.0
.
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 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"]
});
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" });
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" });
selectEvent.clearFirst(getByLabelText("Food"));
await wait(() => {
expect(getByTestId("form")).toHaveFormValues({ food: "" });
});
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"]
});
selectEvent.clearFirst(getByLabelText("Food"));
await wait(() => {
expect(getByTestId("form")).toHaveFormValues({ food: "" });
});
All the credit goes to Daniel and his StackOverflow answer: https://stackoverflow.com/a/56085734.