Reactjs Komponententest

Question

Ich habe eine LoginInfo Komponente und unter dieser Komponente rufe ich eine weitere Kindkomponente auf. Ich versuche Einheitstest für die Komponenten zu schreiben, indem ich Test-, Enzym- und Reaktions-Tests verwende. teilweise habe ich die testfälle geschrieben aber nicht sicher wie ich test für untergeordnete komponente schreiben kann (LoginInfoEdit). Diese Linie kann ich nicht abdecken.

import React from 'react'; 
import { LoginInfoEdit } from './LoginInfoEdit' 

class LoginInfo extends React.Component { 
constructor(props) { 
    super(props) 
    this.state = { 
     isLoginInfo: false 
    } 
} 
openEdit() { 
    this.setState({ isLoginInfo: true }) 
} 

closeEdit() { 
    this.setState({ isLoginInfo: false }) 
} 
OpenEditForUpdate(e) { 
    e.preventDefault(); 
    this.openEdit(); 
} 
render() { 
    return (
     <div> 
      <form>      
       <div> 
        some text 
       </div> 

       <LoginInfoEdit loginid={this.props.loginid} openloginedit={this.state.isLoginInfo} onClose={this.closeEdit.bind(this)}>       
       </LoginInfoEdit> 
      </form> 
     </div> 
    ) 
} 
} 
export default LoginInfo 

Unit-Test ist Below --------

import React from 'react' 
import { shallow } from 'enzyme'; 
import LoginInfo from './LoginInfo' 
import LoginInfoEdit from './LoginInfoEdit' 

const props = { 
loginid: "1", 
openloginedit: false, 
}; 
describe('LoginInfo component',() => { 
let LoginInfo = null; 
let editButton = null; 

beforeEach(() => { 
    LoginInfo = shallow(<LoginInfo {...props}/>); 
    editButton = LoginInfo.find('button[name="edit"]') 
}) 

it('checks everything set properly',() => { 
    editButton.simulate('click', { preventDefault:() => { } }); 
    expect(LoginInfo.state('isloginedit')).toEqual(true) 
}) 
it('renders child',() => { 
    expect(LoginInfo.find('LoginInfoEdit').length).toEqual(1) 
}); 
it('passes proper props to the child',() => { 
    const expected = { 
    loginid: "1", 
    openloginedit: false, 
    onClose: LoginInfo.instance().closeEdit.bind(this), 
}; 

expect(LoginInfo.find('LoginInfoEdit').props()).toEqual(expected) 
}) 
}) 

Answer 1

der Regel in solchen Fällen Ich kümmere mich nur um zu prüfen, ob wir das Kind machen und geben Requisiten wir auf das Kind wie wünschen:

let component; 

const props = someProps; 

beforeEach(() => { component = mount(<LoginInfo { ..props } />); }); 

it('renders child',() => { 
    expect(component.find('LoginInfoEdit').length).to.eql(1) 
}); 

it('passes proper props to the child',() => { 
    const expected = { 
    loginid: someVal, 
    openloginedit: someotherVal, 
    onClose: component.instance().closeEdit, 
    }; 

    expect(component.find('LoginInfoEdit').props()).to.eql(expected) 
}); 

und dann teste ich gerade die Kinder (in diesem Fall LoginInfoEdit) getrennt von der Mutter