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

Question

Using react-testing-library, I wish to test a form implemented in React.

That form includes a React component of type react-select.

It is necessary to click a part of the react-select component that has no label, no text, etc. (E.g. the dropdown arrow).

Ordinarily, the react-testing-library way to do this is to add a 'data-testid' attribute to the item in question.

I've found that it's possible to give each part of the react-select a CSS class attribute, by providing the 'classNamePrefix' prop to the react-select component. Is there some way to do the same for data-testid attribute?

Note: I'm aware I can provide custom implementations of the components of react-select, but that seems like overkill to get one attribute in place.

Answer 1

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