Enzyme Shallow不会渲染组件，输出也是如此

Question

我有一个FileDrop组件，然后我使用酶来测试它不能正确渲染组件，输出是

<Route render={[Function: render]} />

以下是我的组件：

import React from "react";
import Dropzone from "react-dropzone";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { dropFiles} from "../../actions/fileActions";

class FileDrop extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(accepted, rejected) {
    this.props.dispatch(dropFiles(accepted));
  }

  getInnerContent(filename) {
    return (
      <span className="filename-text">
        <i className="fa fa-3x fa-files-o" /> {filename ? filename : "Click or drag and drop a CSV file here to upload."}
      </span>
    );
  }

  render() {
    return (
      <Dropzone multiple={false} onDrop={this.onDrop} className="drop" activeClassName="active-drop" rejectClassName="reject-drop" accept=".csv">
        <div className="drop-inner">{this.getInnerContent(this.props.droppedFiles.length != 0 ? this.props.droppedFiles[0].name : null)}</div>
      </Dropzone>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    droppedFiles: state.files.droppedFiles
  };
};

export default withRouter(connect(mapStateToProps)(FileDrop));

以下是我的FileDropSpec.js

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import FileDrop from '../../../public/scripts/components/fileupload/FileDrop';

describe('<FileDrop/>', function() {
  it('should have an input to upload files', function () {
    const wrapper = shallow(<FileDrop/>);
    console.log(wrapper.debug());
    expect(wrapper.find('input')).to.have.length(1);
  });
})

Answer 1

这是正确的，浅的只渲染组件树的第一个lvl。在你的情况下，这是withRouter Hoc，为你的组件测试直接使用mount或导出文件drop组件。

export class FileDrop extends React.Component {

并使用它代替默认导出以进行浅层测试。 http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html