javascript - 测试React Js根组件

我正在按以下方式导出react js根组件

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

我要在摩卡测试文件中按以下方式导入此组件

import HomePage from '../components/study/HomePage';

我在测试文件中创建组件，如下所示

beforeEach(() => {
    const _store = createStore(rootReducer, initialState);

    component = TestUtils.renderIntoDocument(
                  <Provider store={_store}>
                    <HomePage />
                  </Provider>
                );
});

运行测试时出现以下错误

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件。
        在不变的情况下（test-entry.js：4563：15）

添加整个首页组件

import { connect } from 'react-redux';
import i18n from 'i18next';
import { Paginate } from ‘pageGul’; //Custom Package
import { bindActionCreators } from 'redux';
import HomeListPage from './HomeListPage';
import PageHeader from '../common/PageHeader';
import * as HomeActions from '../../actions/HomeActions';
import * as constants from '../../constants/uiConstants';


class HomePage extends React.Component {
  constructor(props, context) {
    super(props, context);
    alert('props ' + JSON.stringify(props));
    alert('context ' + JSON.stringify(context));
    this.state = {
      paginate: {}
    };
    this.setPageNumberTextInput = this.setPageNumberTextInput.bind(this);
    this.getPage = this.getPage.bind(this);
    this.resetPageNumberTextInput = this.resetPageNumberTextInput.bind(this);
  }

  getPage(params) { // eslint-disable-line
    return this.props.actions.loadStudies(params);
  }

  componentWillReceiveProps(newProps) {
    if (!_.isEqual(this.props.paginate, newProps.paginate)) {
      this.setState({ paginate: newProps.paginate });
    }
  }

  setPageNumberTextInput(event) { // eslint-disable-line
    debugger;
    const pageStateChange = Object.assign({}, this.state.paginate, { pageInputValue: event.target.value === '' ? '' : parseInt(event.target.value, 10) });
    this.setState({ paginate: pageStateChange });
    if (pageStateChange.pageInputValue === '') return false;
    this.props.actions.loadStudies({ page: pageStateChange.pageInputValue });
  }
  resetPageNumberTextInput() {
    return this.props.paginate.currentPage;
  }


  render() {
    const renderPaginate = !!this.props.paginate;
    let paginateComponent = <div />;// eslint-disable-line
    let headerComponent = <div />;
    if (renderPaginate) {
      paginateComponent = (<Paginate
        paginationParams={this.state.paginate}
        getPage={this.getPage}
        setPageNumberTextInput={this.setPageNumberTextInput}
        resetPageNumberTextInput={this.resetPageNumberTextInput}
        perPageSizes={constants.GRID_PAGE_OPTIONS}
        translations={i18n.t('pagination', { returnObjects: true })}
      />);
    }
    if (this.props.clientDivision) {
      headerComponent = <PageHeader title=“Home Page“ caption={this.props.clientDivision.name} />;
    }
    return (
      <div className="container-fluid">
        {headerComponent}
        <div className="table-container list-container">
          <HomeListPage studies={this.props.studies} clientDivision={this.props.clientDivision} />
          {paginateComponent}
        </div>
      </div>
    );
  }
}
HomePage.propTypes = {
  studies: React.PropTypes.any,// eslint-disable-line
  paginate: React.PropTypes.any,// eslint-disable-line
  actions: React.PropTypes.any// eslint-disable-line
};

const mapStateToProps = state => ({
  studies: state.studies.studies,
  paginate: state.studies.paginate,
  appPermissions: state.permissions.appPermissions
});

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(HomeActions, dispatch)
  };
}


export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

最佳答案

当我忘记导出我的一个组件或我错误地导入了一个组件时，发生了这种情况。

例如：

import HomeListPage from './HomeListPage'

如果它不是HomeListPage文件中的默认导出，将无法正确导入。您的主页是正确的。检查您导入的其他组件，并确保它们是文件中的默认导出。您也可以使用以下命令导入非默认导出

import { HomeListPage } from './HomeListPage'