3

我在进行简单的笑话测试时遇到了很多麻烦。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() 方面存在一些错误。

4

2 回答 2

1

正如瓦格纳所提到的，您需要在测试之外全局要求 jquery。您的组件正在使用 $ 的全局版本，因此添加var $ = require('jquery')不会将 jquery 添加到全局变量 $ 方面做任何事情。

您也没有模拟 ajax 调用。

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

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

因此，只要除了 ajax 调用之外您不需要 jquery 进行任何其他操作，这一行将模拟 jquery 根并模拟 ajax 调用。

于 2015-12-18T15:22:34.003 回答
0

我在初始化时调用 ajax 的 React 组件也有类似的问题。我发现只有expect在方法之外$需要时才有效。jqueryit

我的 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)
    })
  });
});
于 2015-10-30T11:43:06.247 回答