使用Jest和react-test-renderer使用Material-UI時，為什么我的渲染器失敗？

Question

我在下面的不完整測試會拋出錯誤TypeError: Cannot read property 'checked' of undefined在renderer.create行上TypeError: Cannot read property 'checked' of undefined 。 在我的應用程序的根級別渲染相同的組件時，它沒有任何問題。 使用renderer.create的正確方法是什么，以便我可以檢查組件的DOM結構？

測試：

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