如何使用 Jest Enzyme 测试 Material-ui RadioGroup 按钮更改

Question

如何测试 Material-ui RadioGroup 按钮的变化以及 RadioGroup 道具“值”的后续变化，该值设置为本地状态（useState）值

On change 事件应该触发我模拟过的 handleChange

describe("test", () => {
  test(`radio`, () => {

    const handleChange = jest.fn();
    const component = shallow(
      <App />
    );
    const radioGroup = component.find(`[data-test="colorGroup"]`).at(0);
    const blueRadio = radioGroup.find(`[label="blue"]`).at(0);
    blueRadio.simulate(`click`, { checked: true });

    expect(handleChange.mock.calls.length).toBe(1);
  });
});

应用组件

export const App = () => {
  const [color, setColor] = useState(`default`);

  const handleOnChange = (event) => setColor(event.target.value);
  return (
    <Accordion  elevation={0}>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography>choose color</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <FormControl component="fieldset">
          <RadioGroup
            row
            onChange={handleOnChange}
            value={color}
            name="position"
            data-test={`colorGroup`}
          >
            <FormControlLabel
              value="default"
              control={<Radio color="primary" />}
  
            />
            <FormControlLabel
              value="blue"
              control={<Radio color="primary" />}
              label="blue"
            />
          </RadioGroup>
        </FormControl>
      </AccordionDetails>
    </Accordion>
  );
};

测试文件在component/home.spect.js https://codesandbox.io/s/sample-testing-in-react-using-jest-and-enzyme-forked-rrrct?fontsize=14&hidenavigation=1&theme=dark

Answer 1

试试这个方法，

describe("test", () => {
      test(`radio`, () => {
    
        // const handleChange = jest.fn();
        const component = shallow(
          <App />
        );
        const radioGroup = component.find(`[data-test="colorGroup"]`).at(0);
        const blueRadio = radioGroup.find(`[label="blue"]`).at(0);

        expect(radioGroup.props().value).toEqual('default'); //Initial value
        radioGroup.props().onChange({target: {value: true}});
        component.update();

        expect(radioGroup.props().value).toEqual('blue'); //After onChange
      });
    });

如果您仍然面临同样的问题，请告诉我。