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

Question

我有一个简单的组件包裹着 Material UI 复选框。我在这里将其精简到最低限度。

//@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;

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

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

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现在可以正常工作。