Testing Reagieren Js Root-Komponente

Question

ich die reagieren js Wurzelkomponente wie unten

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

am Export ich diese Komponente wie unten in meinem Mokka-Testdatei

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

am Import Ich schaffe die Komponente in die Testdatei wie unten

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

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

ich die unten stehende Störung erhalte, wenn ich die Tests laufen

Invariante Verletzung: Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Sie haben vergessen, wahrscheinlich, um Ihre Komponente aus der Datei zu exportieren in bei invariant (Test-entry.js: 4563: 15) definiert ist.

Hinzufügen gesamten Homepage Component

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

mir Dies geschah, als ich habe vergessen, eine meiner Komponenten zu exportieren, oder ich habe eine meiner Komponenten falsch importiert.

ex:

import HomeListPage from './HomeListPage' 

Wurde nicht korrekt importiert werden, wenn es nicht der Standard-Export in der HomeListPage Datei. Ihre HomePage ist korrekt. Überprüfen Sie Ihre anderen Komponenten, die Sie importieren, und stellen Sie sicher, dass sie in ihren Dateien der Standardexport sind. Sie können auch einen Nicht-Standard-Export mit

import { HomeListPage } from './HomeListPage'