javascript - 如何在 Enzyme/Jest Test 中切换和检查 Material UI 复选框

Question

我有一个简单的组件包裹在 Material UI Checkbox 周围。我在这里将其剥离到最低限度。

//@flow
import React from "react";
import { Checkbox } from "@material-ui/core";

function MyCheckboxComponent() {
  const [checkedState, setCheckedState] = React.useState(true);

  const handleChange = event => {
    setCheckedState(event.target.checked);
  };

  return <Checkbox checked={checkedState} onChange={handleChange} />;
}

export default MyCheckboxComponent;

我只是想测试这个组件并切换 Checkbox 值并检查它。我无法通过简单的测试。我不知道为什么。

import React from "react";

import Enzyme, { mount } from "enzyme";
import { Checkbox } from "@material-ui/core";
import Adapter from "enzyme-adapter-react-16";

import MyCheckboxComponent from "./MyCheckboxComponent";
Enzyme.configure({ adapter: new Adapter() });

/** Interaction tests testing user interaction with PilzButton */
test("Toggle Checkbox test", () => {
  const wrapper = mount(<MyCheckboxComponent />);

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);

  checkBox.simulate('change', { target: { checked: true } });

  expect(checkBox.props().checked).toBe(true);
});

应该 checkBox.simulate('change', { target: { checked: true } });工作并切换 Checkbox 的值??

到目前为止，我在 CodeSandbox 上拥有...

Answer 1

最新版本的 enzyme 缓存 find 返回的结果和其他方法。

您需要重新查找并使用.update()强制刷新状态以重新渲染。

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);

  checkBox.simulate('change', { target: { checked: true } });

  wrapper.update();

  expect(wrapper.find(Checkbox).props().checked).toBe(true);

此外，这可能只是因为您想产生一个最小的可重现问题，但您的测试目前很差，因为您的默认值为 true 并且您正在动态传递 true。

你应该这样做:

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);
  expect(checkBox.props().checked).toBe(true);

  checkBox.simulate('change', { target: { checked: false } });

  wrapper.update();

  expect(wrapper.find(Checkbox).props().checked).toBe(false);

这个测试实际上证明了 onChange现在可以正常工作。