How to add data-testid attribute to react-select components

First of all I'd question why there's no label on the Select as this wouldn't be classed as accessible for screen readers.

But, If you don't want a visible label you could always pass an aria-label prop to the Select and test it that way using getByLabelText.

<Select aria-label="Example Label" ... />

getByLabelText('Example Label')

If you really need to add a data-testid you could replace the specific components you want to add the data-testid too and add it. (See the docs for more info)

e.g.

// @flow

import React from 'react';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import Select, { components } from 'react-select';
import { colourOptions } from './docs/data';

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <span data-testid="DropdownIndicator">
        <EmojiIcon primaryColor={colourOptions[2].color} />
      </span>
    </components.DropdownIndicator>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ DropdownIndicator }}
    defaultValue={[colourOptions[4], colourOptions[5]]}
    isMulti
    options={colourOptions}
  />
);

Codesandbox link

Before all react-select is just a select. In testing you should keep eyes in your components. react-select is a component outside your project, the test cases belong to their owner.

So in this cases I recommend to just mock the package in your benefit.

Here is an example of how to mock it:

jest.mock('react-select', () => ({ options, value, onChange }) => {
  return (
    <select data-testid="react-select-mock" defaultValue={value} onChange={onChange}>
      {options.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
});