Reactjs 如何使用react测试库在react select组件上触发更改事件？

鉴于我不能直接使用react测试库测试内部构件，我该如何测试使用react select的组件？例如，如果我有一个基于react select值的条件渲染，它不会渲染传统的，我仍然可以触发更改吗

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "First", label: "First" },
  { value: "Second", label: "Second" },
  { value: "Third", label: "Third" },
];

function TestApp() {
  const [option, setOption] = useState(null);
  return (
    <div>
      <label htmlFor="option-select">Select Option</label>
      <Select
        value={option}
        options={options}
        onChange={option => setOption(option)}
      />
      {option && <div>{option.label}</div>}
    </div>
  );
}

export default TestApp;

---

我甚至不知道我应该询问什么。是隐藏的输入吗

您可以尝试以下方法使其正常工作：

在ReactSelect组件上触发焦点事件。react select输入元素。 在.react-select\u控件元素上触发mouseDown事件 单击要选择的选项元素 您可以添加值为react select的className和classNamePrefix props，以便专门选择要测试的组件

---

PS：如果您仍然陷入困境，我鼓励您从借用上述答案的地方查看此对话-

我的团队在我们的项目中有一个测试实用程序，可以让我们在花费太多时间试图找出如何正确执行此操作后轻松选择项目。在这里分享，希望能帮助他人

这不依赖于任何React-Select内部或模拟，但需要您设置一个用于链接到React-Select输入的。它使用标签选择给定的选择值，就像用户在真实页面上一样

const KEY_DOWN = 40

// Select an item from a React Select dropdown given a label and
// choice label you wish to pick.
export async function selectItem(
  container: HTMLElement,
  label: string,
  choice: string
): Promise<void> {
  // Focus and enable the dropdown of options.
  fireEvent.focus(getByLabelText(container, label))
  fireEvent.keyDown(getByLabelText(container, label), {
    keyCode: KEY_DOWN,
  })

  // Wait for the dropdown of options to be drawn.
  await findByText(container, choice)

  // Select the item we care about.
  fireEvent.click(getByText(container, choice))

  // Wait for your choice to be set as the input value.
  await findByDisplayValue(container, choice)
}

它可以这样使用：

it('selects an item', async () => {
  const { container } = render(<MyComponent/>)

  await selectItem(container, 'My label', 'value')
})

---

我看到@gpx在那篇帖子中提到要嘲笑它。我想我从来没有模仿过一个组件。也一样吗？谢谢。我在spectrum上也发现了，它有一个示例测试。此答案已提取到npm包中：