如何使用react-testing-library测试react-select

Question

App.js

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

const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
  return { value: e, label: e };
});

class App extends Component {
  state = {
    selected: SELECT_OPTIONS[0].value
  };

  handleSelectChange = e => {
    this.setState({ selected: e.value });
  };

  render() {
    const { selected } = this.state;
    const value = { value: selected, label: selected };
    return (
      <div className="App">
        <div data-testid="select">
          <Select
            multi={false}
            value={value}
            options={SELECT_OPTIONS}
            onChange={this.handleSelectChange}
          />
        </div>
        <p data-testid="select-output">{selected}</p>
      </div>
    );
  }
}

export default App;

App.test.js

import React from "react";
import {
  render,
  fireEvent,
  cleanup,
  waitForElement,
  getByText
} from "react-testing-library";
import App from "./App";

afterEach(cleanup);

const setup = () => {
  const utils = render(<App />);
  const selectOutput = utils.getByTestId("select-output");
  const selectInput = document.getElementById("react-select-2-input");
  return { selectOutput, selectInput };
};

test("it can change selected item", async () => {
  const { selectOutput, selectInput } = setup();
  getByText(selectOutput, "FOO");
  fireEvent.change(selectInput, { target: { value: "BAR" } });
  await waitForElement(() => getByText(selectOutput, "BAR"));
});

这个最小的示例在浏览器中可以正常工作，但是测试失败。我认为没有调用onChange处理程序。如何在测试中触发onChange回调？查找fireEvent元素的首选方法是什么？谢谢

Answer 1

这一定是关于RTL的最常见的问题：D

最好的策略是使用jest.mock（或测试框架中的等效方法）模拟选择并呈现HTML选择。

有关为什么这是最佳方法的更多信息，我也写了一些适用于这种情况的内容。OP询问了Material-UI中的选择，但是想法是一样的。

原始问题和我的答案：

因为您无法控制该UI。它在第3方模块中定义。

因此，您有两种选择：

您可以找出材质库创建的HTML，然后使用container.querySelector查找其元素并与之交互。这需要一段时间，但应该可行。完成所有这些操作后，您必须希望在每个新发行版中，它们不要过多地更改DOM结构，否则您可能必须更新所有测试。

另一个选择是相信Material-UI将使组件能够正常工作并且用户可以使用。基于这种信任，您只需在测试中替换该组件即可。

是的，选项一测试用户看到的内容，但是选项二更易于维护。

以我的经验，第二种选择很好，但是当然，您的用例可能有所不同，您可能必须测试实际的组件。

这是一个如何模拟选择的示例：

jest.mock("react-select", () => ({ options, value, onChange }) => {
  function handleChange(event) {
    const option = options.find(
      option => option.value === event.currentTarget.value
    );
    onChange(option);
  }
  return (
    <select data-testid="select" value={value} onChange={handleChange}>
      {options.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
});

您可以在这里阅读更多内容。