Question

我正在用reactjs开发一个应用程序，并使用Mocha编写测试用例。所以我有一些输入控件和保存按钮的形式。在单击“保存”时，我正在调用“表单提交”（方法-SubmitAppForm）。该应用程序运行正常。

但是，当我编写测试用例时，我无法调用表单Submit方法。

表单代码：

<AvForm onSubmit={this.submitAppForm} model={this.state} ref={c => (this.form = c)}>
<Button id='submitAnalyticsForm' bsClass="btnColor btnCustomClass" type="submit">{this.saveUpdateBtn}</Button>
<!-- Input Controls Come Here -->

摩卡测试案例：

<AvForm onSubmit={this.submitAppForm} model={this.state} ref={c => (this.form = c)}>
<Button id='submitAnalyticsForm' bsClass="btnColor btnCustomClass" type="submit">{this.saveUpdateBtn}</Button>
<!-- Input Controls Come Here -->

it('submits form data', () => {
    const wrapper = shallow(<AddAppAnalyticsComponent/>);
    const submitFormSpy = sinon.createStubInstance(AddAppAnalyticsComponent.prototype.submitAppForm); sinon.stub(AddAppAnalyticsComponent.prototype.submitAppForm);
    wrapper.update();
    componentDidMountStub = sinon.stub(AddAppAnalyticsComponent.prototype, 'componentDidMount').callsFake(function() {

    });   

    const wrapper2 = mount(<AddAppAnalyticsComponent />);
    //Setting values to the input controls
    wrapper.find(AvForm).find('#appName').simulate('change', {target: {value: 'dummy name'}});
    wrapper.find(AvForm).find('#mouseOverText').simulate('change', {target: {value: 'dummy name'}});
    wrapper.find(AvForm).find('#appSummary').simulate('change', {target: {value: 'dummy name'}});
    wrapper.find(AvForm).find('#groupSelectBox').simulate('change', {target: {value: '1'}});
    simulateChangeEvent(wrapper2.find(AvForm).find('#roleMultiSelect'));
    wrapper.find(AvForm).find('#appUrl').simulate('change', {target: {value: 'dummy name'}});

    wrapper.update();
    const button = wrapper.find(AvForm).find('#submitAnalyticsForm');
    expect(button).to.be.present();
    button.simulate('click');
    wrapper.find(AvForm).simulate('submit');
    expect(submitFormSpy).to.have.been.called;
}

function simulateChangeEvent(inputWrapper: ReactWrapper<any, any>) {
    expect(inputWrapper).to.be.present();
    const el = inputWrapper.getDOMNode() as HTMLInputElement;



if (el.type === 'checkbox') {
        el.checked = !el.checked;
    }


inputWrapper.simulate('change', {target: el});

}

我尝试了不同的情况，但似乎没有任何作用。

有人可以让我知道如何解决上述问题吗？

无法使用Mocha调用表单提交

0 个答案: