如何使用Jest酶测试Material-ui RadioGroup按钮的变化

npm install --save-dev jest enzyme enzyme-adapter-react-16 @material-ui/core

// RadioGroupComponent.js
import React, { useState } from 'react';
import { RadioGroup, FormControlLabel, Radio } from '@material-ui/core';

const RadioGroupComponent = () => {
    const [value, setValue] = useState('option1');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return (
        <RadioGroup value={value} onChange={handleChange}>
            <FormControlLabel value="option1" control={<Radio />} label="Option 1" />
            <FormControlLabel value="option2" control={<Radio />} label="Option 2" />
            <FormControlLabel value="option3" control={<Radio />} label="Option 3" />
        </RadioGroup>
    );
};

export default RadioGroupComponent;

// RadioGroupComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import RadioGroupComponent from './RadioGroupComponent';
import { Radio } from '@material-ui/core';

describe('RadioGroupComponent', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = shallow(<RadioGroupComponent />);
    });

    it('should render the RadioGroup with default value', () => {
        expect(wrapper.find(Radio).at(0).props().checked).toBe(true); // Option 1 is checked by default
        expect(wrapper.find(Radio).at(1).props().checked).toBe(false); // Option 2 is not checked
        expect(wrapper.find(Radio).at(2).props().checked).toBe(false); // Option 3 is not checked
    });

    it('should change the value when a different radio button is selected', () => {
        // Simulate selecting Option 2
        wrapper.find(Radio).at(1).simulate('change', { target: { value: 'option2' } });

        // Update the wrapper to reflect the new state
        wrapper.update();

        expect(wrapper.find(Radio).at(0).props().checked).toBe(false); // Option 1 is not checked
        expect(wrapper.find(Radio).at(1).props().checked).toBe(true); // Option 2 is checked
        expect(wrapper.find(Radio).at(2).props().checked).toBe(false); // Option 3 is not checked
    });
});

npm test