Question

我无法在任何地方找到合适的答案。我希望它不是重复的。我有一个简单的酶测试脚本来模拟我在ES6语法中使用Reactjs编写的表单提交。我正在使用mocha作为我的测试运行器。当我尝试模拟“提交”时在形式上，没有调用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位于App组件中，但您的测试正在安装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

由于您尝试在要测试的组件内部存根方法，因此上述存根将不起作用。试试这可能会有所帮助。我认为App和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
       });
    });

酶形式onsubmit没有被调用

2 个答案: