Enzyme Shallow не рендерит компонент, и вывод будет <Route render = {[Function: render]} />

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

Это правильно, мелкий рендеринг только первый уровень вашего дерева компонентов. А в вашем случае это с помощью Router Hoc, для тестирования компонента используйте mount или экспортируйте компонент удаления файла напрямую.

export class FileDrop extends React.Component {

и используйте его вместо экспорта по умолчанию для теста с мелким. http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html