ShallowWrapper 只能包装有效元素 - Enzyme Reactjs答案

【问题标题】：ShallowWrapper can only wrap valid elements - Enzyme ReactjsShallowWrapper 只能包装有效元素 - Enzyme Reactjs
【发布时间】：2019-05-02 20:02:14
【问题描述】：

我正在为一个组件编写一个测试来测试它的一个功能，但是我收到了一个错误： ShallowWrapper can only wrap valid elements

组件文件如下-Panel.jsx（简体）：

class Panel extends Component {
  static propTypes = {
    ...
  };

  static defaultProps = {
    ...
  };

  constructor(props) {
    super(props);
    ...
    this.makeConfigArray = this.makeConfigArray.bind(this);
    this.filterSelected = this.filterSelected.bind(this);
  }

  makeConfigArray() {
    ...
  }

  filterSelected(filters) {
    ...
  }

  render() {
    return (
      <div>
        <ReactFilterSentence
          filters={this.makeConfigArray()}
          label="Filter Page"
          isPersistent
          onChange={(...args) => this.filterSelected(args)}
        />

        <span className="page-filter__config-form-separator" />
      </div>
    );
  }
}

export default Panel;

测试文件如下—— panel-test.jsx:

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import Panel from '../../src/components/Panel.jsx';

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-15');

Enzyme.configure({ adapter: new Adapter() });

describe('<Panel /> component', () => {
  let props;
  const getPanelWrapper = () => shallow(<Panel {...props}/>);

  it('should make regions filter query string', () => {
    const regions =
      {
        "key":"region",
        "value":
          [
            "Nordic > Nordic > Denmark",
            "Nordic > Finland",
            "Nordic > Norway",
            "Nordic > Sweden"
          ]
      };

    const expected = "regions=DK+FI+NO+SE";
    expect(getPanelWrapper().instance().makeRegionsQueryString(regions)).to.equal(expected);
  });
});

任何想法为什么会发生这种情况将不胜感激！

【问题讨论】：

标签： javascript reactjs mocha.js enzyme chai

【解决方案1】：

const getPanelWrapper = () => shallow(<Panel {...props}/>);

应该是：

const getPanelWrapper = shallow(<Panel {...props}/>);

【讨论】：