Test-Reaktion: Invariant Verletzung: Elementtyp ist ungültig: undefined

Question

Hallo Ich lerne Reagieren/Redux

ich ein To-do-App erstellt es funktioniert gut, aber wenn ich versuche, einen Komponententest mit jsdom schreiben es zeigt mir dieser Fehler, einige Zeit damit verbracht, kann aber nicht das Problem herausgefunden:

die Komponente (es ist nur ein Textfeld + Taste)

import React from 'react' 
import {addTodo} from '../actions' 
import {connect} from 'react-redux' 

let inputText 

class AddTodo extends React.Component { 
    constructor(props, context){ 
     super(props, context) 
    } 

    render(){ 
     const {text, handleAdd} = this.props 
     return (
      <div> 
       Text: 
       <input type='text' ref={node=>{ inputText=node}} /> <button onClick={()=>handleAdd(inputText.value)} >Add </button> 
      </div> 
     ) 
    } 
} 

const handleAdd = (text)=>{ 
      dispatch(addTodo(text)) 
     } 

const mapDispatchToProps = (dispatch, ownProps) =>{ 
    return { 
     handleAdd: (text)=>{ 
      dispatch(addTodo(text)) 
     } 
    } 
} 

AddTodo = connect(null,mapDispatchToProps)(AddTodo) 

export default AddTodo 

die spec.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { 
    renderIntoDocument, 
    scryRenderDOMComponentsWithTag, 
    Simulate 
} from 'react-addons-test-utils' 
import {AddTodo} from '../../src/containers/AddTodo' 
import {expect} from 'chai' 

describe('Add todo',()=>{ 
    it('render the button and text field',()=>{ 
     const component = renderIntoDocument(<AddTodo />); 
     const button = scryRenderDOMComponentsWithTag(component, 'button'); 
     const input = scryRenderDOMComponentsWithTag(component, 'input'); 
     expect(button.length).to.be(1); 
     expect(input.length).to.be(1); 
    }) 
}) 

Der Fehler:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

Answer 1

Sie sind als Standard-Export Export-Komponente:

export default AddTodo 

Aber es wie genannt Export

import {AddTodo} from '../../src/containers/AddTodo' 

So ist AddTodo undefined importieren.

ändern Import:

import AddTodo from '../../src/containers/AddTodo'