reactjs - 测试 Material UI Radio Checked Value

Question

• 我有一个使用 React 和 Redux 编写的功能组件 Hook 。
• 我正在使用 Jest 和 Enzyme 进行测试。
• 该组件呈现 Material UI 单选按钮(代码示例如下):

<RadioGroup>
  <FormControlLabel
    value="batchName"
    label="Batch Name"
    name="batchName"
    control={
      <Radio
        disableRipple
        name="batchName"
        color="primary"
        checked={searchBy === 'batchName'}
        onClick={() => {dispatch(actions.setBatchSearchBy('batchName'))}}
      />
    }
  />
  <FormControlLabel
    value="firstPaymentDate"
    label="First Payment Date"
    name="firstPaymentDate"
    control={
      <Radio:
        disableRipple
        name="firstPaymentDate"
        color="primary"
        checked={searchBy === 'firstPaymentDate'}
        onClick={() => {dispatch(actions.setBatchSearchBy('firstPaymentDate'))}}
      />
    }
  />
</RadioGroup>

测试文件:

import React from 'react';
import { BatchHeaderComponent } from '../../../components/batchManagement/BatchHeaderComponent';
import configureStore from '../../../store';
import {Provider} from "react-redux";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Radio from "@material-ui/core/Radio";

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

describe('BatchHeaderComponent', () => {
  it('mounts to the DOM with its sub-components', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <BatchHeaderComponent/>
    </Provider>);
    expect(wrapper.find(BatchHeaderComponent)).toBeDefined();
  });

  it('changes searchBy when a new option has been selected', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <BatchHeaderComponent />
    </Provider>);
    const radio = wrapper.find(Radio).last();
    console.log(radio.debug());
    // radio.simulate('change', {target: {name: 'firstPaymentDate', checked: true}});
    // radio.prop('onChange', {target: { name: 'firstPaymentDate', checked: true}});
    radio.simulate('click');
    console.log(radio.debug());
    expect(radio.props().checked).toEqual(true);
  });
});

在模拟“点击”或“更改”事件时，我无法更改“选中”值。

无论我采取哪条路径，检查的值都保持为 false。

如有任何建议，我们将不胜感激。 谢谢!

Answer 1

我明白了。我需要再次运行wrapper.find才能看到更新后的更改。

  it('changes searchBy when a new option has been selected', () => {
    const wrapper = mount(<Provider store={configureStore()}>
      <BatchHeaderComponent />
    </Provider>);
    const radio = wrapper.find(Radio).last();
    radio.simulate('click');
    expect(wrapper.find(Radio).last().props().checked).toEqual(true);
  });