如何在React-Select组件中添加data-testid属性

Question

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

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

有必要点击 react-select 组件的某个部分，该部分没有标签、没有文本等。（例如，下拉箭头）

通常，使用 react-testing-library 的方法是将 'data-testid' 属性添加到相关项中。

我发现可以通过向 react-select 组件提供 'classNamePrefix' prop 来给 react-select 的每个部分都添加 CSS class 属性。是否有一种类似的方法来操作 data-testid 属性？

注意：我知道我可以提供 react-select 组件的自定义实现，但是这似乎是过度麻烦的方式。

- Hirva Savani

---

你可能更想使用react-select-event，这是一个专门为测试react-select组件而构建的库，它与react-testing-library一起使用：https://github.com/romgain/react-select-event - toohool

Answer 1

首先，我会质疑为什么 Select 没有标签，因为这样不适合屏幕阅读器的使用。

但是，如果你不想要一个可见的标签，你可以向 Select 传递一个 aria-label 属性，并使用 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}
  />
);

Codesandbox链接

- Lee

Answer 2

在所有的react-select中，它只是一个选择器。在测试中，您应该关注您的组件。 react-select是您项目之外的组件，测试用例属于它们的所有者。

因此，在这种情况下，我建议您只是模拟该软件包以便受益。

以下是如何模拟的示例：

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

- Martin Gainza Koulaksezian