JestJs认为ajax没有被调用

Question

要让一个简单的jest测试正常工作，我有很多麻烦。Jest坚持认为我的Ajax调用没有发生，并显示以下错误消息：

FAIL  authTest.js (1.828s)
● Authentication: Logging In › it Doesn't currently have a logged in user
  - Expected Function to be called with { url : 'api/loggedin', type : 'GET', error :       <jasmine.any(function Function() { [native code] })>, success : <jasmine.any(function Function() { [native code] })> }.
    at Spec.<anonymous> (/Users/ritmatter/reps/spec/authTest.js:13:20)
    at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

被测试的代码在一个名为auth.jsx的文件中，它看起来像这样：

loggedIn: function() {
  return $.ajax({
    url: 'api/loggedin',
    type: 'GET',
    error: function(xhr, status, err) {
      return false;
    }.bind(this),
    success: function(data) {
      return true;
    }.bind(this),
  });
},

测试看起来像这样：

/** @jsx React.DOM */
"use strict";
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;

describe('Authentication: Logging In', function() {
  it('Doesn\'t currently have a logged in user', function () {
    var $ = require('jquery');
    jest.dontMock('../js/auth.jsx');
    var auth = require('../js/auth.jsx');
    auth.loggedIn();
    expect($.ajax).toBeCalledWith({
      url: 'api/loggedin',
      type: 'GET',
      error: jasmine.any(Function),
      success: jasmine.any(Function)
    });
  });
});

你知道为什么jest会认为这不会被调用吗？我看了看周围，似乎有一些关于dontMock()和mock()的bug。

Answer 1

正如Wagner提到的，您需要在测试之外全局地使用jquery。您的组件使用的是$的全局版本，因此添加var $ = require('jquery')并不会将jquery添加到全局变量$中。

您也没有模拟ajax调用。

在测试react时，我通过简单地重新定义$来避免加载jquery时出现的问题：

window.$ = {ajax: jest.genMockFunction()}

因此，只要除了ajax调用之外不需要jquery，这一行代码就会模拟jquery根目录并模拟ajax调用。

Answer 2

我在初始化时调用ajax的React组件也遇到了类似的问题。我发现$上的expect只有在你需要it方法之外的jquery时才能工作。

我的React组件和测试用例是这样的(它们是ES6，但您可以理解)

import React from 'react'
import $ from 'jquery'

export default class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {things:[]};
  }

  componentWillMount() {
    $.ajax({
      url: 'http://localhost:3000/things',
      success: (result) => this.setState(result),
      error: (ex) => console.log(ex)
    })
  }

  render() {
    //stuff
  }
}

和测试

jest.dontMock('../components/MyComponent')

import React from 'react'
import TestUtils from 'react-addons-test-utils'
import $ from 'jquery'

const Wall = require('../components/MyComponent');

describe('MyComponent', () => {

  it('calls the things end point', () => {
    const myComp = TestUtils.renderIntoDocument(<MyComponent />)

    expect($.ajax).toBeCalledWith({
      url: 'http://localhost:3000/things',
      success: jasmine.any(Function),
      error: jasmine.any(Function)
    })
  });
});