測試陣營的js根組件

Question

我出口的反應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> 
       ); 
}); 

我在運行測試時出現下面的錯誤

不可違反：元素類型無效：預期爲字符串（對於內置組件）或類/函數（對於複合組件），但得到：未定義。你可能忘了您的組件從它的定義文件導出 在不變（測試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

這發生在我身上時，我忘了導出我的一個組件，或者我錯誤地導入了一個組件。

例如：

​​

將無法​​正確導入如果不是在HomeListPage文件的默認出口。您的主頁是正確的。檢查您導入的其他組件，並確保它們是文件中的默認導出。您也可以導入非默認的出口與

import { HomeListPage } from './HomeListPage'