react-select - 如何将 data-testid 属性添加到 react-select 组件

Question

使用 react-testing-library，我想测试一个在 React 中实现的表单。

该表单包含一个 react-select 类型的 React 组件。

需要单击 react-select 组件中没有标签、没有文本等的部分(例如下拉箭头)。

通常，react-testing-library 执行此操作的方法是向相关项目添加“data-testid”属性。

我发现通过向 react-select 组件提供 'classNamePrefix' 属性，可以为 react-select 的每个部分提供一个 CSS 类属性。有没有办法对 data-testid 属性做同样的事情？

注意:我知道我可以提供 react-select 组件的自定义实现，但是让一个属性到位似乎有点矫枉过正。

Answer 1

首先我想问一下为什么Select上没有标签因为这不会被归类为屏幕阅读器可访问。

但是，如果你不想要一个可见的标签，你总是可以传递一个 aria-label支持 Select并使用 getByLabelText 以这种方式进行测试。

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

getByLabelText('Example Label')

如果你真的需要添加一个 data-testid您可以替换要添加的特定组件 data-testid也添加它。 ( See the docs for more info )

例如

// @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