为什么我的渲染器在使用使用Jest和react-test-renderer的Material-UI时会失败？

Question

我下面未完成的测试在renderer.create行抛出了错误TypeError: Cannot read property 'checked' of undefined。当在我的应用程序的根级别呈现相同的组件时，它呈现没有问题。为了检查组件的DOM结构，使用renderer.create的正确方法是什么？

测试：

import React from 'react';
import renderer from 'react-test-renderer';
import MultiSelect from '../multi_select';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

it('Test the stuff', () => {
  let component = renderer.create(
    <MuiThemeProvider>
      <MultiSelect options={['a','b','c']} id='test'/>
    </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>
    );
  }
}

.babelrc

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

Answer 1

在这个问题上挣扎了一段时间，最后找到了一个变通方法。

这条评论引导我找到了修复的方法：https://github.com/facebook/react/issues/7740#issuecomment-247335106

基本上，您需要将模拟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();
  });