Jestjs 在jest测试中单击材质ui单选按钮并查看它'；s效应

我试图在一个定制的可重用组件上完成一个jest测试，但很难让它正常工作。我已经在沙箱中使用纯材质ui组件将其还原，但仍然难以模拟单选按钮单击。我试过了

     wrapper.find(Radio).first().simulate('click');
     wrapper.find(Radio).first().prop('onChange', { target: { checked: true } });
     wrapper.find(Radio).first().simulate('change', {target: {checked: true}});
     wrapper.find(Radio).first().update();

正在使用测试失败的沙箱：

请在此处完成代码文件：

import React from "react";
import { mount } from "enzyme";
import { RadioGroup, Radio } from "@material-ui/core";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";

configure({ adapter: new Adapter() });

const TestComponentRadioGroup = () => {
  const [value, setValue] = React.useState("other");
  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <div>
      <FormControl component="fieldset">
        <FormLabel component="legend">Gender</FormLabel>
        <RadioGroup
          aria-label="gender"
          name="gender1"
          value={value}
          onChange={handleChange}
        >
          <FormControlLabel value="female" control={<Radio />} label="Female" />
          <FormControlLabel value="male" control={<Radio />} label="Male" />
          <FormControlLabel value="other" control={<Radio />} label="Other" />
        </RadioGroup>
      </FormControl>
    </div>
  );
};

describe("---RadioGroup Interaction Test Suite", () => {
  test("Test to check selection isupdated from the last option to the first ", () => {
    const wrapper = mount(<TestComponentRadioGroup />);

    const radioButtonGroup = wrapper.find(RadioGroup);
    expect(radioButtonGroup).toHaveLength(1);

    //check that the first item isn't checked but the third one is
    const radioButtons = wrapper.find(Radio);
    console.log("we found " + radioButtons.length + " radiobuttons");
    expect(radioButtons).toHaveLength(3);

    expect( wrapper.find(Radio).first().props().checked).toBe(false);
    expect( wrapper.find(Radio).last().props().checked).toBe(true);

    //Desperation - I expected the first one to work!
    wrapper.find(Radio).first().simulate("click");
    wrapper.find(Radio).first().prop("onChange", { target: { checked: true } });
    wrapper.find(Radio).first().simulate("change", { target: { checked: true } });
    wrapper.find(Radio).first().update();

    //I am not sure that I need this!
    wrapper.update();

    expect( wrapper.find(Radio).first().props().checked).toBe(true);
    expect( wrapper.find(Radio).last().props().checked).toBe(false);
  });
});

从“React”导入React；
从“酶”导入{mount}；
从“@material ui/core”导入{RadioGroup，Radio}”；
从“酶”导入{configure}；
从“酶-适配器-反应-16”导入适配器；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/FormLabel”导入FormLabel；
配置（{adapter:newadapter（）}）；
常量TestComponentRadioGroup=（）=>{
const[value，setValue]=React.useState（“其他”）；
const handleChange=事件=>{
设置值（event.target.value）；
};
返回(
性别
);
};
描述（“--RadioGroup交互测试套件”，（）=>{
test（“test to check selection从最后一个选项更新为第一个选项”，（）=>{
const wrapper=mount（）；
const radioButtonGroup=包装器.find（RadioGroup）；
期望（radioButtonGroup）.toHaveLength（1）；
//检查第一项是否未选中，但第三项是否已选中
const radioButtons=wrapper.find（单选）；
log（“我们发现”+单选按钮.length+“单选按钮”）；
期望（单选按钮）。有长度（3）；
expect（wrapper.find（Radio.first（）.props（）.checked）.toBe（false）；
expect（wrapper.find（Radio.last（）.props（）.checked.toBe）（true）；
//绝望-我希望第一个能起作用！
wrapper.find（Radio.first（）.simulate（“单击”）；
find（Radio.first（）.prop（“onChange”，{target:{checked:true}}）；
find（Radio.first（）.simulate（“change”，{target:{checked:true}}）；
wrapper.find（Radio.first（）.update（）；
//我不确定我是否需要这个！
wrapper.update（）；
expect（wrapper.find（Radio.first（）.props（）.checked）.toBe（true）；
expect（wrapper.find（Radio.last（）.props（）.checked.toBe）（false）；
});
});

此代码适用于我：

import { Radio } from '@material-ui/core';

let mComponent: ReactWrapper;
mComponent = mount(component);

const radioInputs = mComponent.find(Radio);
radioInputs.at(0).simulate('click', { target: { checked: true } });

---

这个反应测试库将为您完成这项工作。 我正在使用数据测试id以无线电输入为目标

it("Radio group change value and new value updated and last value no more checked", () => {
    const { container, getByTestId } = render(<FilterRadioButtonGroup {...props} />);

    // Before change selection
    const allValueRadioButton = getByTestId('radio-button-all');
    expect(allValueRadioButton.checked).toEqual(true);

    // Change selection
    const withValueRadioButton = getByTestId('radio-button-with');
    fireEvent.click(withValueRadioButton, { target: { checked: true }});
    expect(withValueRadioButton.checked).toEqual(true);

    // Old value is no more checked
    expect(allValueRadioButton.checked).toEqual(false);
});

it（“无线组更改值和新值已更新，最后一个值不再检查”，（）=>{
const{container，getByTestId}=render（）；
//更改选择前
常量allValueRadioButton=getByTestId（'radio-button-all'）；
expect（allValueRadioButton.checked）.toEqual（true）；
//更改选择
常量withValueRadioButton=getByTestId（'radio-button-with'）；
单击（withValueRadioButton，{target:{checked:true}}）；
expect（带ValueRadioButton.选中）。toEqual（真）；
//旧值不再被检查
expect（allValueRadioButton.checked）。toEqual（false）；
});

如果您还使用材质ui，请使用inputProps属性，以获取显示的测试id数据。（作为他们的道具）

如果不使用材质ui，则无需输入道具，只需直接测试数据即可

---

：）

谢谢分享。您是否介意编辑您的答案，包括您正在做的事情的解释以及为什么它解决了这个问题？我需要另一个库吗？为什么jest看不到模拟的点击呢？短暂性脑缺血发作

<Radio
size={size}
disabled={item.disabled}
inputProps={{
    "data-testid": `radio-button-${item.text}`,
}}/>