title: Why is my renderer failing when using Material-UI using Jest and react-test-renderer?
body: <p>My incomplete test below throws the error <code>TypeError: Cannot read property 'checked' of undefined</code> on the <code>renderer.create</code> line.  When rendering the same component at the root level of my application it renders no problem.  What is the correct way to use <code>renderer.create</code> so that I can inspect the DOM structure of my component?</p>
  
  <p>Test:</p>
  
  <pre><code>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', () =&gt; {
    let component = renderer.create(
      &lt;MuiThemeProvider&gt;
        &lt;MultiSelect options={['a','b','c']} id='test'/&gt;
      &lt;/MuiThemeProvider&gt;
    );
  });
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>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) =&gt; this.setState({values});
    }
  
    menuItems(values) {
      return this.state.options.map((name) =&gt; (
        &lt;CheckBox
          key={name}
          checked={values &amp;&amp; values.indexOf(name) &gt; -1}
          value={name}
          label={name}
          onClick={this._toggle.bind(this, name)}
        /&gt;
      ));
    }
  
    _toggle(name) {
      let currentValue = this.state.values;
      let newValue = currentValue;
  
      let exists = currentValue.some((item) =&gt; {
        return item == name;
      });
  
      if (exists){
  
        newValue = currentValue.filter((value) =&gt; {
          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 (
        &lt;div className="multi_select"&gt;
          &lt;span style={greyOut}&gt;{hintText}&lt;/span&gt;
          {this.menuItems(values)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    presets: ["stage-2", "es2015", "react"]
  }
  </code></pre>