Question

我正在导出react js root组件，如下所示

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

我正在我的mocha测试文件中导入此组件，如下所示

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

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

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

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

运行测试时出现以下错误

不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。在不变量（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);

Answer 1

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

例如：

import HomeListPage from './HomeListPage'

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

导入非默认导出

import { HomeListPage } from './HomeListPage'

测试React Js根组件

1 个答案: