Testen für Komponente/Requisiten ist undefined mit Enzym in ReactJS

Question

Ich versuche zu testen, ob die LoginContainer-Komponente über Requisiten in der Kopfzeile mit Enzym existiert, aber ich habe kein Glück.

Hier ist mein Haupt-App:

import React from 'react' 
import Header from '../components/Header' 
import LoginContainer from './LoginContainer' 

const App =() => (
    <Header login={<LoginContainer />} /> 
) 
export default App 

Meine Rubrik:

import React from "react"; 
const Header = ({login}) => 
    <header role="banner"> 
     {login} 
    </header> 
export default Header 

Und das ist mein Test:

import React from 'react' 
import { shallow } from 'enzyme' 
import Header from '../components/Header' 

const setup = props => { 
    const component = shallow(
     <Header {...props} /> 
    ) 
    return { 
     component: component 
    } 
} 
describe('Header component',() => { 
    it('should render login',() => { 
     const { component } = setup(); 
     console.log(component.props({ login })) //this is undefined 
    }) 
}) 

Das Problem ist, wenn ich den Test ausführen es scheint, dass Login (LoginContainer) Requisiten ist undefiniert. Kann mir bitte jemand einen Rat geben?

Answer 1

Sie geben nichts an Setup weiter.

import React from 'react' 
import { shallow } from 'enzyme' 
import Header from '../components/Header' 

const setup = props => { 
    const component = shallow(
     <Header {...props} /> 
    ) 
    return { 
     component: component 
    } 
} 
describe('Header component',() => { 
    it('should render login',() => { 
     const { component } = setup({ login: <LoginContainer/> }); 
     expect(component.props().login).toBeDefined() 
    }) 
}) 

Answer 2

Sie sollten die Instanz zuerst erhalten.

NOTE: When called on a shallow wrapper, .props() will return values for props on the root node that the component renders, not the component itself. To return the props for the entire React component, use wrapper.instance().props. See .instance() => ReactComponent

z.B.

  it('should have props',() => {     
       const l = <div>Login ...</div>; 
       const {component} = setup({login:l}); 
       console.log(component.instance().props.login); 
       expect(component.instance().props.login).to.exist; 
      });