Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
react-select-event
Advanced tools
Readme
Simulate user events on react-select elements, for use with react-testing-library.
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");
react-select
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(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();
All the credit goes to Daniel and his StackOverflow answer: https://stackoverflow.com/a/56085734.
FAQs
Simulate react-select events for react-testing-library
The npm package react-select-event receives a total of 309,370 weekly downloads. As such, react-select-event popularity was classified as popular.
We found that react-select-event demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.