酵素：如何測試onSubmit函數作爲道具傳遞？

Question

我相當新的酶。我有兩個組件正在測試中。

form.jsx

const LoginForm = ({ style, handleSubmit }) => { 
    return (
    <form onSubmit={handleSubmit}> 
     <Button type='submit'> 
      Login 
     </Button> 
    </form> 
); 
}; 

LoginForm.propTypes = { 
    handleSubmit: PropTypes.func.isRequired 
}; 

我在另一個組件，如下所示使用該組件：

Component.jsx

export default class Login extends Component { 
    constructor(props) { 
    super(props); 
    this.onLogin = this.onLogin.bind(this); 
    } 

    onLogin(event) { 
    event.preventDefault(); 
    this.props.loginUser(); 
    } 
    render() { 
    return (
     <LoginForm style={loginFormStyles} handleSubmit={this.onLogin} />  
    ); 
    } 
} 

Login.propTypes = { 
    auth: PropTypes.object.isRequired, //mapStateToProps 
    loginUser: PropTypes.func.isRequired //mapDispatchToProps 
}; 

我已經寫了試驗form和他們正在通過。

形狀test.js

it('should have a onSubmit handler',() => { 
     const props = { 
     handleSubmit:() => {} 
     }; 
     const wrapper = shallow(<LoginForm {...props} />); 
     expect(_.isFunction(wrapper.props().onSubmit)).to.be.true; 
    }); 

    it('should should call handlesubmit on form submission',() => { 
     const handleSubmit = sinon.spy(); 
     const wrapper = shallow(<LoginForm handleSubmit={handleSubmit} />); 
     wrapper.simulate('submit'); 
     expect(handleSubmit).to.have.been.called; 
    }); 

這些測試都通過。令人困惑的部分是：

1-我如何測試onLogin函數Component.jsx來自form.jsx？

2-反之亦然，如果我必須從component.jsx觸發onSubmit的我該怎麼做？

Answer 1

首先，您可以將Component.jsx重命名爲其他內容。

，並在測試你可以做如下事情，

import Component from '../src/login'; 
import { stub } from 'sinon'; 


describe('login',() => { 
    it('should call onsubmit',() => { 
    const onSubmit = stub() 
     .withArgs('username', 'password'); 
    const loginComponent = mount(<LoginForm handleSubmit={onSubmit} />); 
    loginComponent.simulate('submit'); 
    expect(onSubmit.calledOnce).to.equal(true); 
    }); 
}); 

我沒有測試過這一點，但它是接近你在找什麼。

更新： 我測試了這個，它工作。