Question

我是React＆amp;的新手JEST框架，我尝试在响应中执行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)
  });

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

使用Object

调用预期的函数

任何人都可以帮我在单元测试脚本中找出问题。

Answer 1

unmock方法删除了mock，因此您需要使用Jest mock方法。 Jest repo有几个例子描述了基本用法，包括如何模拟jquery以及如何使用react，因此值得一看。

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

1 个答案: