\n\n\n\n[](https://badge.fury.io/js/react-select-event)\n[](https://github.com/romgain/jest-websocket-mock/actions)\n[](https://codecov.io/gh/romgain/react-select-event)\n[](https://github.com/prettier/prettier)\n\n## Install\n\n```bash\nnpm install --save-dev react-select-event\n```\n\nImport `react-select-event` in your unit tests:\n\n```js\nimport selectEvent from \"react-select-event\";\n// or\nconst selectEvent = require(\"react-select-event\");\n```\n\n### Supported versions of `react-select`\n\nThis library is tested against all versions of `react-select` starting from `2.1.0`.\n\n## API\n\nEvery 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\")`.\n\n### `select(input: HTMLElement, optionOrOptions: Matcher | Array, config?: object): Promise`\n\nThe `optionOrOptions` parameter can be any valid dom-testing-library [TextMatch](https://testing-library.com/docs/queries/about#textmatch) object (eg. string, regex, function, number).\n\nSelect one or more values in a react-select dropdown.\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"\" });\n\nawait selectEvent.select(getByLabelText(\"Food\"), [\"Strawberry\", \"Mango\"]);\nexpect(getByRole(\"form\")).toHaveFormValues({ food: [\"strawberry\", \"mango\"] });\n\nawait selectEvent.select(getByLabelText(\"Food\"), \"Chocolate\");\nexpect(getByRole(\"form\")).toHaveFormValues({\n food: [\"strawberry\", \"mango\", \"chocolate\"],\n});\n```\n\nThis also works for [async selects](https://react-select.com/async):\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"\" });\n\n// start typing to trigger the `loadOptions`\nfireEvent.change(getByLabelText(\"Food\"), { target: { value: \"Choc\" } });\nawait selectEvent.select(getByLabelText(\"Food\"), \"Chocolate\");\nexpect(getByRole(\"form\")).toHaveFormValues({\n food: [\"chocolate\"],\n});\n```\n\n`select` also accepts an optional `config` parameter.\n`config.container` can be used to specify a custom container to use when the `react-select` dropdown is rendered\nin a portal using `menuPortalTarget`:\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nawait selectEvent.select(getByLabelText(\"Food\"), [\"Strawberry\", \"Mango\"], {\n container: document.body,\n});\nexpect(getByRole(\"form\")).toHaveFormValues({ food: [\"strawberry\", \"mango\"] });\n```\n\nThe container can also be passed in as a function if it needs to be lazily evaluated:\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nawait selectEvent.select(getByLabelText(\"Food\"), [\"Strawberry\", \"Mango\"], {\n container: () => document.body.querySelector(\"[class$=-menu]\"),\n});\nexpect(getByRole(\"form\")).toHaveFormValues({ food: [\"strawberry\", \"mango\"] });\n```\n\n### `create(input: HTMLElement, option: string, config?: object): Promise }`\n\nCreates and selects a new item. Only applicable to `react-select` [`Creatable`](https://react-select.com/creatable) elements.\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"\" });\nawait selectEvent.create(getByLabelText(\"Food\"), \"papaya\");\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"papaya\" });\n```\n\n`create` take an optional `config` parameter:\n\n- `config.createOptionText` can be used when [creating elements with a custom label text, using the `formatCreateLabel` prop](https://react-select.com/props#creatable-props).\n- `config.container` can be used when the `react-select` dropdown is rendered in a portal using `menuPortalTarget`.\n- `config.waitForElement` Whether `create` should wait for new option to be populated in the select container. Defaults to `true`.\n\n### `clearFirst(input: HTMLElement): Promise`\n\nClears the first value in the dropdown.\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"chocolate\" });\nawait selectEvent.clearFirst(getByLabelText(\"Food\"));\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"\" });\n```\n\n### `clearAll(input: HTMLElement): Promise`\n\nClears all values in the dropdown.\n\n```jsx\nconst { getByRole, getByLabelText } = render(\n \n);\nexpect(getByRole(\"form\")).toHaveFormValues({\n food: [\"chocolate\", \"vanilla\", \"strawberry\"],\n});\nawait selectEvent.clearAll(getByLabelText(\"Food\"));\nexpect(getByRole(\"form\")).toHaveFormValues({ food: \"\" });\n```\n\n### `openMenu(input: HTMLElement): void`\n\nOpens the select dropdown menu by focusing the input and simulating a down arrow keypress.\n\n```jsx\nconst { getByLabelText, queryByText } = render(\n \n);\nexpect(queryByText(\"Pizza\")).toBeNull();\nselectEvent.openMenu(getByLabelText(\"Food\"));\nexpect(getByText(\"Pizza\")).toBeInTheDocument();\n```\n\n## Credits\n\nAll the credit goes to [Daniel](https://stackoverflow.com/users/164268/daniel) and his StackOverflow answer: [https://stackoverflow.com/a/56085734](https://stackoverflow.com/a/56085734).\n","readmeFilename":"README.md"}
![\"cricket\"](\"https://raw.githubusercontent.com/romgain/react-select-event/master/other/cricket.png\")
\n \n\n