ajax - 使用 JEST 进行 ajax 调用的单元测试 React 组件

Question

我有一个 React 组件，可以在 componentDidMount 方法中进行 AJAX 调用。当我尝试使用 React.addons.TestUtils 渲染它时，组件会在不进行 AJAX 调用的情况下渲染。我如何使用 jest 测试 React 组件以便它进行 AJAX 调用？我是否还需要使用 phantomJS(或像 env 这样的浏览器)来提供 DOM 功能来响应组件？

react 组件:

return React.createClass({

  componentDidMount : function() {
    $.ajax({
    ... makes http request
    })
  }

  render : function() {
    <div>
      //view logic based on ajax response...
    </div>
  }
});

测试用例:

jest.dontMock(../MyComponent);

var React = require('react/addons');

var TestUtils = React.addons.TestUtils;

var MyComponent = require(../MyComponent);

describe('Sample Test', function(){     

    it('To Render the component', function() {

       var component = <MyComponent />;

       var DOM = TestUtils.renderIntoDocument(component);

       .... // Some other code... 
       });
})

Answer 1

我真的很喜欢Sinon.js以及它创建一个假服务器的能力，该服务器可以响应 ajax 请求以进行测试。你可以将它与 Jest 一起使用就可以了。以下是它可以为您做什么的示例:

describe('MyComponent', function() {     

    it('successfully makes ajax call and renders correctly', function() {
        //create fake server
        var server = sinon.fakeServer.create();
        //make sure that server accepts POST requests to /testurl
        server.respondWith('POST', '/testurl', 'foo'); //we are supplying 'foo' for the fake response
        //render component into DOM
        var component = <MyComponent />;
        var DOM = TestUtils.renderIntoDocument(component);
        //allow the server to respond to queued ajax requests
        server.respond();
        //expectations go here
        //restore native XHR constructor
        server.restore();
    });

});

我不确定您是否愿意在测试套件中包含另一个框架，因此如果它不适合您的目的，请随意忽略此答案。