如何将 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并添加它。（有关更多信息，请参阅文档）

例如

// @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}
  />
);

代码沙盒链接