如何在 JEST 中模拟 $.ajax 调用答案

【问题标题】：How to mock $.ajax call in JEST如何在 JEST 中模拟 $.ajax 调用
【发布时间】：2016-11-03 17:23:45
【问题描述】：

我是 React & JEST 框架的新手，我尝试在 react 中进行 ajax 调用，如下所示，如果我收到成功数据，它将重定向到主页，否则会显示错误消息。

let params ={
    userName : this.state.userName,
    password : this.state.passWord
};

$.ajax({
    url: '/reactApp/login',
    dataType: 'json',
    contentType: 'application/json;',
    type: 'POST',
    data: JSON.stringify(params),
    success: function (successData) {
        if (typeof(Storage) !== "undefined") {
            localStorage.setItem('userProfile', JSON.stringify(successData));
            browserHistory.push('/reactApp/Home');
        } else {
            alert("The browser version is not supported.Please use Internet explorer 11, Chrome or firefox.")
        }
    }.bind(this),
    error: function(errorData){
        this.setState({
            errorMessage: errorData.message,
            errorDisplay: true,             
        });
    }.bind(this);

反应代码正在运行，我尝试在 JEST 中为上述 ajax 调用代码编写单元测试，如下所示，

  jest.unmock('jquery');
  jest.unmock('./AjaxLogin');

  var $ = require('jquery');
  const Login = TestUtils.renderIntoDocument(<AjaxLogin />);
  expect(Login).toBeDefined();
  var handleClick = jest.genMockFunction();

  var button = TestUtils.findRenderedDOMComponentWithTag(Login, 'button');

  TestUtils.Simulate.click(button);

  Login.handleClick(); 
  expect($.ajax).toBeCalledWith({
     url: '/reactApp/login',
     dataType: 'json',
     contentType: 'application/json;',           
     type: 'POST',
     data: JSON.stringify({userName : 'testing', password : 'password'}),
     success: jasmine.any(Function),
     error: jasmine.any(Function)
  });

当我运行这个测试用例时，我收到以下错误消息，我不知道上面的代码有什么问题。

使用对象调用的预期函数

谁能帮我找出单元测试脚本中的问题。

【问题讨论】：

标签： reactjs react-router jestjs

【解决方案1】：

unmock 方法移除了 mock，所以你需要使用 Jest mock 方法来代替。 Jest repo 有几个示例描述了基本用法，包括如何模拟 jquery 以及如何与 react 一起使用，因此值得一看。

【讨论】：