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

我相當新的酶。我有兩個組件正在測試中。酵素：如何測試onSubmit函數作爲道具傳遞？

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的我該怎麼做？

來源

2016-08-14 Umair

如果您使用的是'redux'，那麼我會建議測試您的操作（在這種情況下是登錄操作）。測試點擊事件並檢查'redux'是否正常工作（即調用動作，調度成功或失敗）沒有什麼大的好處 – anoop

是的，我正在使用REDX。但考慮到這種情況是否有任何方法來測試父級複合組件？ – Umair

首先，您可以將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); 
    }); 
});

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

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

來源

2016-08-14 11:35:00 anoop

@umair爲你做了這項工作嗎？ – anoop

http://stackoverflow.com/questions/38952021/how-to-unit-test-localstorage-using-sinon – Umair

非常感謝。它正在工作。 – Umair

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

回答

相關問題