{"library":"react-select-event","title":"React Select Event Simulation","description":"react-select-event is a specialized companion library for React Testing Library, designed to accurately simulate user interactions on `react-select` components in unit and integration tests. The current stable version is `5.5.1`. This library has an active release cadence, with frequent minor and patch updates, alongside occasional major versions introducing significant features or breaking changes. Its key differentiators include its tight integration with `react-testing-library`'s ecosystem, enabling robust testing of complex `react-select` scenarios like asynchronous option loading, multi-select, and portal-rendered menus. It automatically wraps actions in React's `act` utility (since v5.1.0) to prevent common `act` warnings, and supports `react-select` versions from 2.1.0 onwards. It streamlines testing workflows by providing high-level event simulation functions that mimic real user behavior, unlike lower-level `fireEvent` calls that might not fully replicate `react-select`'s internal state management.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-select-event"],"cli":null},"imports":["import selectEvent from 'react-select-event';","import selectEvent from 'react-select-event';\nawait selectEvent.select(inputElement, 'Option Label');","import selectEvent from 'react-select-event';\nawait selectEvent.create(inputElement, 'New Option');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport Select from 'react-select';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport selectEvent from 'react-select-event';\n\nconst OPTIONS = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' },\n  { value: 'mango', label: 'Mango' },\n];\n\nconst MyForm = ({ isMulti = false, menuPortalTarget = undefined }) => (\n  <form data-testid=\"form\">\n    <label htmlFor=\"food\">Favorite Food</label>\n    <Select\n      options={OPTIONS}\n      name=\"food\"\n      inputId=\"food\"\n      isMulti={isMulti}\n      menuPortalTarget={menuPortalTarget}\n    />\n  </form>\n);\n\ndescribe('react-select-event basic usage', () => {\n  it('should select a single option', async () => {\n    render(<MyForm />);\n    expect(screen.getByTestId('form')).toHaveFormValues({ food: '' });\n\n    await selectEvent.select(screen.getByLabelText('Favorite Food'), 'Vanilla');\n\n    expect(screen.getByTestId('form')).toHaveFormValues({ food: 'vanilla' });\n  });\n\n  it('should select multiple options when isMulti is true', async () => {\n    render(<MyForm isMulti />);\n    expect(screen.getByTestId('form')).toHaveFormValues({ food: [] });\n\n    await selectEvent.select(screen.getByLabelText('Favorite Food'), ['Strawberry', 'Mango']);\n\n    expect(screen.getByTestId('form')).toHaveFormValues({ food: ['strawberry', 'mango'] });\n  });\n\n  it('should handle async select options by typing', async () => {\n    const loadOptions = (inputValue: string) =>\n      Promise.resolve(\n        OPTIONS.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))\n      );\n    // A minimal Async component for demonstration\n    const AsyncSelect = (props: any) => (\n      <Select {...props} loadOptions={loadOptions} cacheOptions defaultOptions />\n    );\n\n    render(\n      <form data-testid=\"async-form\">\n        <label htmlFor=\"async-food\">Async Food</label>\n        <AsyncSelect name=\"async-food\" inputId=\"async-food\" />\n      </form>\n    );\n    expect(screen.getByTestId('async-form')).toHaveFormValues({ 'async-food': '' });\n\n    // Simulate typing to trigger loadOptions\n    fireEvent.change(screen.getByLabelText('Async Food'), { target: { value: 'choco' } });\n    await selectEvent.select(screen.getByLabelText('Async Food'), 'Chocolate');\n\n    expect(screen.getByTestId('async-form')).toHaveFormValues({ 'async-food': 'chocolate' });\n  });\n});","lang":"typescript","description":"Demonstrates selecting single and multiple options in a `react-select` component, including handling async selects, and verifying form values using `react-testing-library`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}