Why is my renderer failing when using Material-UI using Jest and react-test-renderer?

Question

My incomplete test below throws the error TypeError: Cannot read property 'checked' of undefined on the renderer.create line. When rendering the same component at the root level of my application it renders no problem. What is the correct way to use renderer.create so that I can inspect the DOM structure of my component?

Test:

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>
  );
});

Component:

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

Wrestled with this one for a bit, and finally found a workaround.

This comment lead me down the path to the fix for this: https://github.com/facebook/react/issues/7740#issuecomment-247335106

Basically you need to pass in a mock createNodeMock as the second argument to 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();
  });