javascript - Testing radio buttons in React 17 with Enzyme

Question

I have a React (v17.0.2) component that has a controlled form with radio buttons and a submit button. When a radio button is selected, the onRadioChange method is executed and sets the 'selected' state hook as the value of the selected radio button. This works as intended in the browser.

const Test = () => {
  const beginner = 'Beginner';
  const intermediate = 'Intermediate';
  const expert = 'Expert';
  const [selected, setSelected] = useState(beginner);
  const formSubmit = (e) => {
    e.preventDefault();
    console.log('formSubmit executed');
    //will dispatch actions
  }
  const onRadioChange = (e) => {
    console.log('onRadioChange');
    setSelected(e.target.value);
  };
  return (
    <div className="form">
      <form onSubmit={(e) => formSubmit(e)}>
        <div className="radio">
          <label id='beginner'>
            <input
              type="radio"
              value={beginner}
              checked={selected === beginner}
              onChange={(e) => onRadioChange(e)}
            />
            {beginner}
          </label>
        </div>
        <div className="radio">
          <label id='intermediate'>
            <input
              type="radio"
              value={intermediate}
              checked={selected === intermediate}
              onChange={onRadioChange}
            />
            {intermediate}
          </label>
        </div>
        <div className="radio">
          <label id='expert'>
            <input
              type="radio"
              value={expert}
              checked={selected === expert}
              onChange={onRadioChange}
            />
            {expert}
          </label>
        </div>
        <div className="radio">
          Selected option is : {selected}
        </div>
        <button className="submitradio" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

When I test it with Enzyme (v3.11.0) using an Adapter I found (@wojtekmaj/enzyme-adapter-react-17)...

  it('should change the selected option when clicking on Intermediate', () => {
    const radio = wrapper.find('#intermediate');
    const selectedOne = wrapper.find('.selected');
    expect(selectedOne.props().children[1]).toBe('Beginner');

    radio.simulate('change', { target: { value: 'Intermediate' } });

    const selectedTwo = wrapper.find('.selected');
    expect(selectedTwo.props().children[1]).toBe('Intermediate')
  });

...it doesn't fire 'onRadioChange'

    Expected: "Intermediate"
    Received: "Beginner"
      35 |
      36 |     const selectedTwo = wrapper.find('.selected');
    > 37 |     expect(selectedTwo.props().children[1]).toBe('Intermediate')
         |                                             ^
      38 |   });
      39 |
      40 | });
      at Object.<anonymous> (src/App.test.tsx:37:45)

Am I doing something wrong or is this a problem with the adapter?

标签： javascriptreactjsjestjsenzyme