Unit testing responds to a component that makes ajax calls using JEST

Question

I have a response component that calls an AJAX call in componentDidMount . While I'm trying to do this with React.addons.TestUtils , the component gets rendered without calling AJAX. How can I test a reaction component with a joke to make an AJAX call? Should I use phantomJS (or a browser like env), as well as to provide DOM capabilities to respond to the component?

Component Reaction:

 return React.createClass({ componentDidMount : function() { $.ajax({ ... makes http request }) } render : function() { <div> //view logic based on ajax response... </div> } }); 

TestCase:

 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

I really like Sinon.js and its ability to create a fake server that can respond to ajax requests for testing purposes. You can use it with Jest just fine. Here is an example of what it can do for you:

 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(); }); }); 

I'm not sure how much you open to include another framework in your test suite, so feel free to ignore this answer if it is not suitable for your purposes.

Answer 2

This is a late answer, but two answers include mocking servers, which in some cases can be excessive, and the answer, which actually says $.ajax.calls , leads to a broken link, so I will give a brief explanation of an easier way to do this.

jest will make fun of the call to $ .ajax, which means that $.ajax.calls[0][0] will contain the intercepted call to $ .ajax. You can then access successful or callback callbacks and call them directly, for example $.ajax.calls[0][0].success(/* Returned data here. */) .

You can then continue with testing the results of your ajax call.

Answer 3

Since your $ .ajax is taunted as a joke, you don’t get the expected action, because at runtime you don’t get the real $ .ajax function.

You need to make fun of your $ .ajax function so that it changes the state of the reacting component. You can refer to this jest message for details. Use

 $.ajax.mock.calls 

Answer 4

If you only need to make fun of http requests, you can also use nock . Sinon is great, but comes with a lot of extra features that you might not need.

 describe('MyComponent', function() { it('successfully makes ajax call and renders correctly', function() { // mocks a single post request to example.com/testurl var server = nock('http://example.com') .post('/testurl') .reply(200, 'foo'); var component = <MyComponent />; var DOM = TestUtils.renderIntoDocument(component); }); }); 

Please note that you should probably call nock.cleanAll() after each test so that any failures or protracted bullying will not ruin the next test.