Question

我希望使用react-testing-library来测试React中实现的表单。

该形式包括类型为react-select的React组件。

必须单击反应选择组件中没有标签，没有文本等的部分（例如，下拉箭头）。

通常，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

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

如何将data-testid属性添加到反应选择组件

2 个答案: