Javascript 为什么我的渲染器在使用Jest和react测试渲染器使用材质UI时失败？

下面我的未完成测试抛出错误

TypeError:无法读取
渲染器上未定义的
的属性“checked”。创建

行。在我的应用程序的根级别呈现相同的组件时，它不会呈现任何问题。使用渲染器的正确方法是什么。创建，以便检查组件的DOM结构

测试：

---

与此进行了一番斗争，终于找到了解决办法

此评论将引导我找到解决此问题的方法：

基本上，您需要将mock

createNodeMock

作为第二个参数传递给

react test renderer

：

  test('checked', () => {
    // Mock node - see https://reactjs.org/docs/test-renderer.html#ideas
    const createNodeMock = element => {
      return {
        refs: {
          checkbox: {
            checked: true
          }
        }
      }
    };

    const component = renderer.create(<Checkbox label="foo" />, { createNodeMock });
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

test（'checked'，（）=>{
//模拟节点-请参阅https://reactjs.org/docs/test-renderer.html#ideas
const createNodeMock=元素=>{
返回{
参考文献：{
复选框：{
核对：正确
}
}
}
};
const component=renderer.create（，{createNodeMock}）；
让tree=component.toJSON（）；
expect（tree.toMatchSnapshot（）；
});

刚刚尝试使用react测试上下文提供程序向MultiSelect组件提供MuiThemeProvider上下文。它的表现没有任何不同。

import React, {Component} from 'react';
import CheckBox from 'material-ui/Checkbox';

/**
 * `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
 */
export default class MultiSelect extends Component {

  /** Default constructor. */
  constructor(props) {
    super(props);
    this.state = {
      values: (props.values)? props.values : [],
      options : (props.options)? props.options : [],
      hintText : (props.id)? "Select " + props.id : "Select an option",
            style : this.props.style
    };

    this.handleChange = (event, index, values) => this.setState({values});
  }

  menuItems(values) {
    return this.state.options.map((name) => (
      <CheckBox
        key={name}
        checked={values && values.indexOf(name) > -1}
        value={name}
        label={name}
        onClick={this._toggle.bind(this, name)}
      />
    ));
  }

  _toggle(name) {
    let currentValue = this.state.values;
    let newValue = currentValue;

    let exists = currentValue.some((item) => {
      return item == name;
    });

    if (exists){

      newValue = currentValue.filter((value) => {
        return value != name;
      });

    } else {

      newValue.push(name);
    }
    this.setState({values: newValue});
  }

  getValue() {
    return this.state.values;
  }

  render() {
    const {values, hintText} = this.state;
    let greyOut = {color: 'rgba(0, 0, 0, 0.3)'}

    return (
      <div className="multi_select">
        <span style={greyOut}>{hintText}</span>
        {this.menuItems(values)}
      </div>
    );
  }
}

{
  presets: ["stage-2", "es2015", "react"]
}

  test('checked', () => {
    // Mock node - see https://reactjs.org/docs/test-renderer.html#ideas
    const createNodeMock = element => {
      return {
        refs: {
          checkbox: {
            checked: true
          }
        }
      }
    };

    const component = renderer.create(<Checkbox label="foo" />, { createNodeMock });
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });