Jest.fn() 在 React 单元测试中不起作用

Question

我正在测试一个名为 handleSubmit 的组件方法（名称无关紧要......）。

测试

// ...imported all modules at the top, including enzyme

it('should submit form data', () => {
  let form = shallow(<Form />);
  let handleSubmit = jest.fn(); // <= this doesn't work!!

  form.find('.submit-btn').simulate('click');

  expect(form.find('.submit-btn').length).toEqual(1);
  expect(handleSubmit).toHaveBeenCalled();
});

组件

import React, { Component } from 'react';
import axios from 'axios';

class CarnetSidebarForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const target = e.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(e) {
    e.preventDefault();

    let payload = {
      title: this.state.title
    };

    this.postCard(payload);

    console.log('Payload: ', payload);
  }

  postCard(data) {
    return axios.post('http://localhost:4000/api/cards', data)
      .then(response => {
        console.log('Response: ', response.message);
      });
  }

  render() {
    return (
      <div className="card-form-panel">
        <form className="card-form" onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label htmlFor="card-title-field">Title</label>
            <input className="form-control"
               type="text"
               placeholder="Title..."
               id="card-title-field"
               name="title"
               value={this.state.title}
               onChange={this.handleChange} />
          </div>

          <input className="card-submit-btn btn btn-primary" type="submit" value="Save" />
        </form>
      </div>
    );
  }
}

export default CarnetSidebarForm;

我不断收到此错误消息，现在很烦人：

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

但是如果我在测试中创建一个假组件，那么它就可以工作

it('should submit form data', () => {
  let handleSubmit = jest.fn();

  // create a fake component
  let form = mount(
    <form onSubmit={handleSubmit}>
      <input className="submit-btn" type="submit" value="Save" />
    </form>
  );

  form.find('.submit-btn').simulate('submit');

  expect(form.find('.submit-btn').length).toEqual(1);
  expect(handleSubmit).toHaveBeenCalled();
});

与enzyme 中的shallow() 或mount 与导入组件有关吗？我花了很多天寻找答案，但我迷路了。

Answer 1

添加到@rauliyohmc 答案。问题是，即使在模拟了组件方法之后，它也没有被调用，而是调用了实际的方法。所以，在花了一些时间之后，我找到了一个解决方案。在模拟其方法后，您需要 forceUpdate 您的组件。

it('should submit form data', () => {
  let form = mount(<Form />); // need to use mount to make it work.
  form.instance().handleSubmit = jest.fn();
  form.update(); // equivalent to calling form.instance().forceUpdate();

  form.find('.submit-btn').simulate('submit'); // simulated event must be submit

  expect(form.find('.submit-btn').length).toEqual(1);
  expect(form.instance().handleSubmit).toHaveBeenCalled();
}); 

最小示例：gist

Answer 2

问题是你不是在模拟组件方法本身，而是创建一个新的模拟函数并将其分配给一个随机变量。

在渲染前尝试通过对象原型模拟方法如下：

jest.mock('../Form'); // mock the component before importing it using the right path
import Form from '../Form';
...
it('should submit form data', () => {
  Form.prototype.handleSubmit = jest.fn();
  let form = shallow(<Form />);

  form.find('.submit-btn').simulate('submit');

  expect(form.find('.submit-btn').length).toEqual(1);
  expect(Form.prototype.handleSubmit).toHaveBeenCalled();
}); 

注意：不确定您使用的是哪个 jest 版本，但自 Jest v15 起，默认情况下禁用自动模拟，因此您需要在将模块导入文件之前显式模拟模块。

Answer 3

<input className="card-submit-btn btn btn-primary" type="submit" value="Save" />

您的组件没有使用 className .submit-btn，它使用的是 .card-submit-btn。