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

Posted 2023-03-05

【中文标题】如何在 Enzyme / Jest Test 中切换和检查 Material UI 复选框

【英文标题】：How to toggle and check a Material UI Checkbox in Enzyme / Jest Test

【发布时间】：2020-08-15 01:42:39

【问题描述】：

我有一个简单的组件围绕着一个 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;

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

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 上拥有...

【参考方案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现在可以正常工作了。

【参考方案2】：

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

 checkBox.prop("onChange")( currentTarget:  checked: true  );

  wrapper.update();

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

只是对上述答案的一个小更新。复选框状态不会随着“模拟”而改变，而是对我来说与“道具”一起使用。