对材料UI选择组件的更改反应测试库 [英] React testing library on change for Material UI Select component

问题描述

我正在尝试使用react-testing-library测试Select component的onChange事件。

我使用工作正常的getByTestId获取元素，然后设置元素的值，然后调用fireEvent.change(select);，但从未调用过onChange，也从未更新过状态。

我既尝试使用选择组件本身，也尝试通过获取对基础input元素的引用，但这两种方法都不起作用。

有什么解决方案吗？或者这是已知问题？

推荐答案

当您将Material-UI的Select与native={false}(默认设置)配合使用时，这会变得非常复杂。这是因为呈现的输入甚至没有<select>HTML元素，而是div、隐藏输入和一些svg的混合。然后，当您单击SELECT时，将显示一个表示层(有点像模式)，其中包含您的所有选项(顺便说一句，这些选项不是<option>HTML元素)，我相信正是单击这些选项中的一个，才会触发您作为onChange回调传递到原始材料的任何内容-UI<Select>

总而言之，如果您愿意使用<Select native={true}>，那么您将拥有实际的<select>和<option>HTML元素可供使用，并且您可以如预期的那样在<select>上触发更改事件。

以下是代码沙箱中的测试代码，可以正常工作：

import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";
import Select from "@material-ui/core/Select";

beforeEach(() => {
  jest.resetAllMocks();
});

afterEach(() => {
  cleanup();
});

it("calls onChange if change event fired", () => {
  const mockCallback = jest.fn();
  const { getByTestId } = render(
    <div>
      <Select
        native={true}
        onChange={mockCallback}
        data-testid="my-wrapper"
        defaultValue="1"
      >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </Select>
    </div>
  );
  const wrapperNode = getByTestId("my-wrapper")
  console.log(wrapperNode)
  // Dig deep to find the actual <select>
  const selectNode = wrapperNode.childNodes[0].childNodes[0];
  fireEvent.change(selectNode, { target: { value: "3" } });
  expect(mockCallback.mock.calls).toHaveLength(1);
});

您将注意到，您必须通过挖洞向下遍历节点以查找实际的<select>曾经是材料的位置-UI呈现其<Select>。但是一旦找到，您就可以对其进行fireEvent.change操作。

CodeSandbox位于此处：

这篇关于对材料UI选择组件的更改反应测试库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！