测试材料 UI 单选检查值答案

【问题标题】：Testing Material UI Radio Checked Value测试材料 UI 单选检查值
【发布时间】：2020-04-04 02:05:49
【问题描述】：

我有一个使用 React 用 React 和 Redux 编写的功能组件挂钩。
我正在使用带有 Enzyme 的 Jest 进行测试。
组件呈现 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);
  });
});

在模拟“点击”或“更改”事件时，我无法更改“已检查”值。

无论我走哪条路，检查的值都保持为假。

任何建议将不胜感激。谢谢！

【问题讨论】：

我正在尝试测试 onChange 方法的工作服代码覆盖率。

标签： reactjs redux react-redux material-ui react-hooks

【解决方案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);
  });

【讨论】：