How to correctly pass a data-testid to <AsyncSelect> in react-select for testing?

Question

I am trying to add a stable data-testid to a react-select component (specifically AsyncSelect) so that I can reliably select it in my Playwright E2E tests.

When I try to pass the data-testid prop directly to the <AsyncSelect> component, the prop is not rendered on the component's root <div> in the DOM.

My current workaround is to wrap the entire component in a new and apply the data-testid to that wrapper.

 <div data-testid="my-selector-wrapper">
   <AsyncSelect>....</>
  </div>

This works, but it adds an extra, seemingly unnecessary DOM element just for testing.

My question is:

Is wrapping react-select in a div the standard, accepted pattern for adding a test ID?
Is there a built-in react-select prop or a different, cleaner method (perhaps using the components prop or classNamePrefix) that allows me to apply a data-testid to the component's root element without this wrapper?

This is a good example of why not to use test ids in the first place, which add tons of unnecessary DOM attributes just for testing, and avoid Playwright's suggested best practice of using user-visible locators like getByRole. That said, I'm assuming you're stuck with test ids--in that case, if the library throws out props you add to it and the docs don't provide an alternative, then you're out of luck, and yes, you likely need to add an element just for testing. — ggorlen
– ggorlen, Commented Nov 13 at 20:52
Perhaps you can find some inspiration in the tests in the react-select repo? github.com/JedWatson/react-select/tree/master/packages/… — Alexander Wiklund
– Alexander Wiklund, Commented Nov 13 at 21:20

Drew Reese · Accepted Answer · 2025-11-13 22:52:43Z

Is wrapping react-select in a div the standard, accepted pattern for adding a test ID?

I'm inclined to say no. If you need access to any data-X attributes this should just generally already be available to you or passed through (automagically) to any underlying components. However, generally speaking for lack thereof this is a viable workaround.

Is there a built-in react-select prop or a different, cleaner method (perhaps using the components prop or classNamePrefix) that allows me to apply a data-testid to the component's root element without this wrapper?

There is the ability to pass additional input element properties using the Select component's components prop and a custom input component.

For more details see https://react-select.com/components.

Example:

import AsyncSelect from "react-select/async";
import { components } from "react-select";

...

<AsyncSelect
  options={options}
  components={{
    Input: (props) => (
      <components.Input {...props} data-testid="my-selector-wrapper" />
    ),
  }}
/>

That said, using data-testid for testing the DOM is generally not advised as you should really be accessing your UI/DOM the same way you users do, i.e. by the visible text and semantic/accessible labels/roles/etc. data-testid should be a last resort after all other methods of accessing/interacting with the DOM have failed.

Collectives™ on Stack Overflow

How to correctly pass a data-testid to <AsyncSelect> in react-select for testing?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related