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

Question

我正在为组件编写一个测试来测试其功能之一，但出现错误:ShallowWrapper只能包装有效元素

组件文件如下 - 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);
  });
});

任何关于为什么会发生这种情况的想法将不胜感激!

Answer 1

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

应该是:

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