Reactjs 未调用Submit上的酶形式

我在任何地方都找不到合适的答案。我希望它不是复制品。 我有一个简单的酶测试脚本来模拟表单提交，这是我用ES6语法中的Reactjs编写的。我用摩卡做我的试跑者。当我尝试模拟表单的“提交”时，onSubmit函数没有被调用。 我正在测试的js文件：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    constructor() {
        super();
        this.onSubmitDetails = this.onSubmitDetails.bind(this);
    };

    onSubmitDetails(event) {
        event.preventDefault();
        alert("Hey! Form submitted??")
    }
  render() {
    return (
      <div className="App">
          <form onSubmit={this.onSubmitDetails}>
              <input type="text" className="loginBox" placeholder="Username"
                 required="required"/>
              <input type="password" className="loginBox"  placeholder="Password" required="required"/>
              <input type="submit" className="loginBox submit" value="SIGN IN"/>
          </form>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.onSubmitDetails=this.onSubmitDetails.bind（this）；
};
onSubmitDetails（事件）{
event.preventDefault（）；
警报（“嘿！表单已提交？？）
}
render（）{
返回(
);
}
}
导出默认应用程序；

我的测试代码：

import 'jsdom-global/register';
import React from 'react';
import ReactDOM from 'react-dom';
import { shallow, mount } from "enzyme";
import expect from 'expect';
import sinon from 'sinon';
import App from './App';

describe("Component: LoginContainer", () => {
it('should login', () => {
    const props = {
        fields: {
            user: {
                username: {},
                password: {}
            }
        },
        onSubmitDetails: () => {}
    };
    const onSubmitDetails = sinon.spy();
    const wrapper = mount(<LoginContainer />);

    const username = wrapper.find('.loginBox').get(0);
    username.value = 'abc';
    expect(username.value).toEqual('abc');

    const password = wrapper.find('.loginBox').get(1);
    password.value = 'xyz';
    expect(password.value).toEqual('xyz');

    wrapper.find('form').simulate('submit', { preventDefault(){} });
    console.log(onSubmitDetails.called);  //gives false
    });
});

导入“jsdom全局/寄存器”；
从“React”导入React；
从“react dom”导入react dom；
从“酶”中导入{shall，mount}；
从“expect”导入expect；
从“sinon”进口sinon；
从“./App”导入应用程序；
描述（“组件：LoginContainer”，（）=>{
它（'应该登录'，（）=>{
常量道具={
字段：{
用户：{
用户名：{}，
密码：{}
}
},
onSubmitDetails:（）=>{}
};
const onSubmitDetails=sinon.spy（）；
const wrapper=mount（）；
const username=wrapper.find（'.loginBox'）.get（0）；
username.value='abc'；
expect（username.value）.toEqual（'abc'）；
const password=wrapper.find（'.loginBox'）.get（1）；
password.value='xyz'；
expect（password.value）.toEqual（'xyz'）；
find（'form'）.simulate（'submit'，{preventDefault（）{}}）；
console.log（onSubmitDetails.called）；//给出false
});
});

在您粘贴的代码中，

表单

位于应用程序组件中，但您的测试正在装载LoginContainer。让我们假设这是一个输入错误，并且您的测试确实正在安装应用程序。：）

您正在创建间谍，但需要将其作为道具传递给组件，然后在

onSubmitDetails

内部方法中调用该道具。您几乎在测试中定义了道具，但忘记将它们传递给组件

取决于您想要测试什么：提交表单调用从外部（通过prop）提供给组件的函数？然后将其作为道具接受，并在代码中调用该函数：

class App extends Component {
    constructor() {
        super();
        this.onSubmitDetails = this.onSubmitDetails.bind(this);
    };

    onSubmitDetails(event) {
        event.preventDefault();
        //this prop is what you will fake in your test
        this.props.login()
    }
  render() {
    return (
      <div className="App">
          <form onSubmit={this.onSubmitDetails}>
             ...
          </form>
      </div>
    );
  }
}

---

在您粘贴的代码中，

表单

位于应用程序组件中，但您的测试正在装载LoginContainer。让我们假设这是一个输入错误，并且您的测试确实正在安装应用程序。：）

您正在创建间谍，但需要将其作为道具传递给组件，然后在

onSubmitDetails

内部方法中调用该道具。您几乎在测试中定义了道具，但忘记将它们传递给组件

取决于您想要测试什么：提交表单调用从外部（通过prop）提供给组件的函数？然后将其作为道具接受，并在代码中调用该函数：

class App extends Component {
    constructor() {
        super();
        this.onSubmitDetails = this.onSubmitDetails.bind(this);
    };

    onSubmitDetails(event) {
        event.preventDefault();
        //this prop is what you will fake in your test
        this.props.login()
    }
  render() {
    return (
      <div className="App">
          <form onSubmit={this.onSubmitDetails}>
             ...
          </form>
      </div>
    );
  }
}

---

由于您试图在您试图测试的组件内部存根方法，所以上面的存根将不起作用。 试试这个，会有帮助的。我估计应用程序和登录组件是一样的

    import 'jsdom-global/register';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { shallow, mount } from "enzyme";
    import expect from 'expect';
    import sinon from 'sinon';
    import App from './App';

    describe("Component: LoginContainer", () => {
        const props = {
            fields: {
                user: {
                    username: {},
                    password: {}
                }
            },
        };
        const wrapper = mount(<App />);
        before(() => {
          sinon.stub(App.prototype, 'onSubmitDetails'); // this will stub the method inside app component
        })

        it('should login', () => {



        const username = wrapper.find('.loginBox').get(0);
        username.value = 'abc';
        expect(username.value).toEqual('abc');

        const password = wrapper.find('.loginBox').get(1);
        password.value = 'xyz';
        expect(password.value).toEqual('xyz');

        wrapper.find('form').simulate('submit', { preventDefault(){} });
          expect(App.prototype.onSubmitDetails).to.have.property('callCount', 1); //test your expectation here
        });

        after(() => {
          App.prototype.onSubmitDetails.restore(); // restores stubbed method
       });
    });

导入“jsdom全局/寄存器”；
从“React”导入React；
从“react dom”导入react dom；
从“酶”中导入{shall，mount}；
从“expect”导入expect；
从“sinon”进口sinon；
从“./App”导入应用程序；
描述（“组件：LoginContainer”，（）=>{
常量道具={
字段：{
用户：{
用户名：{}，
密码：{}
}
},
};
const wrapper=mount（）；
之前（（）=>{
sinon.stub（App.prototype，'onSubmitDetails'）；//这将在App组件中存根方法
})
它（'应该登录'，（）=>{
const username=wrapper.find（'.loginBox'）.get（0）；
username.value='abc'；
expect（username.value）.toEqual（'abc'）；
const password=wrapper.find（'.loginBox'）.get（1）；
password.value='xyz'；
expect（password.value）.toEqual（'xyz'）；
find（'form'）.simulate（'submit'，{preventDefault（）{}}）；
expect（App.prototype.onSubmitDetails）.to.have.property（'callCount'，1）；//在此处测试您的期望值
});
之后（（）=>{
App.prototype.onSubmitDetails.restore（）；//还原存根方法
});
});

由于您试图在要测试的组件内存根方法，因此上述存根将无法工作。 试试这个，会有帮助的。我估计应用程序和登录组件是一样的

    import 'jsdom-global/register';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { shallow, mount } from "enzyme";
    import expect from 'expect';
    import sinon from 'sinon';
    import App from './App';

    describe("Component: LoginContainer", () => {
        const props = {
            fields: {
                user: {
                    username: {},
                    password: {}
                }
            },
        };
        const wrapper = mount(<App />);
        before(() => {
          sinon.stub(App.prototype, 'onSubmitDetails'); // this will stub the method inside app component
        })

        it('should login', () => {



        const username = wrapper.find('.loginBox').get(0);
        username.value = 'abc';
        expect(username.value).toEqual('abc');

        const password = wrapper.find('.loginBox').get(1);
        password.value = 'xyz';
        expect(password.value).toEqual('xyz');

        wrapper.find('form').simulate('submit', { preventDefault(){} });
          expect(App.prototype.onSubmitDetails).to.have.property('callCount', 1); //test your expectation here
        });

        after(() => {
          App.prototype.onSubmitDetails.restore(); // restores stubbed method
       });
    });

导入“jsdom全局/寄存器”；
从“React”导入React；
从“react dom”导入react dom；
从“酶”中导入{shall，mount}；
从“expect”导入expect；
从“sinon”进口sinon；
从“./App”导入应用程序；
描述（“组件：LoginContainer”，（）=>{
常量道具={
字段：{
用户：{
用户名：{}，
密码：{}
}
},
};
const wrapper=mount（）；
之前（（）=>{
sinon.stub（App.prototype，'onSubmitDetails'）；//这将在App组件中存根方法
})
它（'应该登录'，（）=>{
const username=wrapper.find（'.loginBox'）.get（0）；
username.value='abc'；
expect（username.value）.toEqual（'abc'）；
const password=wrapper.find（'.loginBox'）.get（1）；
password.value='xyz'；
expect（password.value）.toEqual（'xyz'）；
find（'form'）.simulate（'submit'，{preventDefault（）{}}）；
expect（App.prototype.onSubmitDetails）.to.have.property（'callCount'，1）；//在此处测试您的期望值
});
之后（（）=>