未调用Enzyme form onsubmit

Question

我在任何地方都找不到合适的答案。我希望它不是复制品。我有一个简单的酶测试脚本来模拟表单提交，这是我用ES6语法中的Reactjs编写的。我正在使用mocha作为我的测试跑步器。当我试图模拟表单的'submit‘时，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 '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
    });
});

Answer 1

在您粘贴的代码中，form位于应用程序组件中，但您的测试是挂载LoginContainer。让我们假设这是一个打字错误，而你的测试确实是在安装App。:)

你正在创建一个间谍，但是你需要将它作为一个道具传递给你的组件，然后在你的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>
    );
  }
}

然后在你的测试中，提供你的间谍作为login道具：

it('should login', () => {
    //the login prop spy
    const loginSpy = sinon.spy()
    const props = {
        fields: {
            user: {
                username: {},
                password: {}
            }
        },
        login: loginSpy
    };
    const onSubmitDetails = sinon.spy();

    //your code is in App component but you were mouting a LoginContainer??
    const wrapper = mount(<App { ...props } />);

    const username = wrapper.find('.loginBox').get(0);
    //these two lines are non sense
    username.value = 'abc';
    expect(username.value).toEqual('abc');

    const password = wrapper.find('.loginBox').get(1);
    // the following two as well
    password.value = 'xyz';
    expect(password.value).toEqual('xyz');

    // this is where you test your submit event will be calling
    // whatever functions is passed as `login` prop
    wrapper.find('form').simulate('submit', { preventDefault(){} });
    console.log(loginSpy.called);  
    });
});

Answer 2

由于您试图在要测试的组件中使用存根方法，因此上面的存根将不起作用。试试这个可能会有帮助。我在抱怨应用程序和LoginComponent是一样的。

    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
       });
    });