|
| 1 | +--- |
| 2 | +id: ecosystem-react-select-event |
| 3 | +title: react-select-event |
| 4 | +--- |
| 5 | + |
| 6 | +[`react-select-event`][gh] is a companion library for `react-testing-library` |
| 7 | +that provides helper methods for interacting with [`react-select`][react-select] |
| 8 | +elements. |
| 9 | + |
| 10 | +``` |
| 11 | +npm install --save-dev react-select-event |
| 12 | +``` |
| 13 | + |
| 14 | +```jsx |
| 15 | +import React from 'react' |
| 16 | +import Select from 'react-select' |
| 17 | +import { render } from 'react-testing-library' |
| 18 | +import selectEvent from 'react-select-event' |
| 19 | + |
| 20 | +const { getByTestId, getByLabelText } = render( |
| 21 | + <form data-testid="form"> |
| 22 | + <label htmlFor="food">Food</label> |
| 23 | + <Select options={OPTIONS} name="food" inputId="food" isMulti /> |
| 24 | + </form> |
| 25 | +) |
| 26 | +expect(getByTestId('form')).toHaveFormValues({ food: '' }) // empty select |
| 27 | + |
| 28 | +// select two values... |
| 29 | +await selectEvent.select(getByLabelText('Food'), ['Strawberry', 'Mango']) |
| 30 | +expect(getByTestId('form')).toHaveFormValues({ food: ['strawberry', 'mango'] }) |
| 31 | + |
| 32 | +// ...and add a third one |
| 33 | +await selectEvent.select(getByLabelText('Food'), 'Chocolate') |
| 34 | +expect(getByTestId('form')).toHaveFormValues({ |
| 35 | + food: ['strawberry', 'mango', 'chocolate'], |
| 36 | +}) |
| 37 | +``` |
| 38 | + |
| 39 | +- [react-select-event on GitHub][gh] |
| 40 | + |
| 41 | +[gh]: https://github.com/romgain/react-select-event |
| 42 | +[react-select]: https://github.com/JedWatson/react-select |
0 commit comments