开玩笑测试 onClick() 得到错误“预期的模拟函数已被调用，但没有被调用。”答案

【问题标题】：Jest testing onClick() gets error 'Expected mock function to have been called, but it was not called.'开玩笑测试 onClick() 得到错误“预期的模拟函数已被调用，但没有被调用。”
【发布时间】：2019-03-23 06:09:50
【问题描述】：

我正在尝试一些 TDD，我想我会从一个简单的登录组件开始。我正在努力测试提交按钮上的功能。

我可以测试按钮是否被渲染，并且当它被点击时状态被更新，所以该函数在组件中被调用。测试可以看到状态更新了，但是函数没有被调用。

我已经将我的代码简化为我能做到的最基本的功能，我一定看不到任何东西！我删除了登录组件的所有其他测试，以便尝试缩小问题范围。我尝试了 shallow() 而不是 mount() 但没有乐趣。我想编写一个更复杂的测试，但我什至无法识别 fn 已被调用。

我的测试：

import React from 'react';
import { mount } from 'enzyme';
import Login from './Login';

describe('when clicking the `submit` button', () => {
  const mockSubmit = jest.fn();

  const props = {
    handleBtnClick: mockSubmit
  };
  const wrapper = mount(<Login {...props} />);

  beforeEach(() => {
    wrapper.find('button.btn-submit').simulate('click');
  });

  it('renders the `submit` button', () => {
    expect(wrapper.find('button.btn-submit')).toExist();
  });

  it('when the submit button is clicked it updates `state`', () => {
    expect(wrapper.state().buttonClicked).toEqual(true);
  });

  it('calls the submit callback', () => {
    expect(mockSubmit).toHaveBeenCalled();
  });
});

我的组件：

import React, { Component } from 'react';


class Login extends Component {
  constructor() {
    super();
    this.state = {
      buttonClicked: false
    }
  }


  handleBtnClick = (e) => {
    e.preventDefault();
    this.setState({
      buttonClicked: true 
    })
  }

  render() {
    console.log(this.state.buttonClicked);
    return(
      <div>
        <h1>Login</h1> 
        <form>

          <div className="form-row">
            <button 
              type="submit" 
              className="btn-submit"
              onClick={this.handleBtnClick}
            >
              Submit
            </button>
          </div>      
        </form>
      </div>

    );
  }
}

export default Login;

【问题讨论】：

您的模拟没有被调用，因为您将它与道具一起发送。在您的组件中，您没有在道具上调用该函数。相反，您正在调用类方法。
啊哈，我只需要搜索如何测试类方法就找到了答案，谢谢！

标签： javascript reactjs jestjs enzyme

【解决方案1】：

好的，所以我需要修改我的搜索并添加关键字“类方法”。我对正在阅读的教程和文章感到困惑。使用它我找到了这个答案：How to mock React component methods with jest and enzyme

所以测试：

it('calls the submit callback', () => {
    expect(mockSubmit).toHaveBeenCalled();
  });

应该是：

it('it calls the handleBtnClick method', () => {
      const mockSubmit= jest.fn();
      wrapper.instance().handleBtnClick= mockSubmit;
      wrapper.instance().handleBtnClick();
      expect(mockSubmit).toHaveBeenCalled();
    });

并且可以移除道具，因为那是错误的树。

【讨论】：