Узел тестирования реагирует на компонент, который делает вызовы ajax с использованием JEST

Question

У меня есть компонент, который вызывает AJAX-вызов в методе componentDidMount. Пока я пытаюсь сделать это с помощью React.addons.TestUtils, компонент получает визуализацию без вызова AJAX. Как я могу протестировать компонент реакции с помощью шутки, чтобы он вызывал вызов AJAX? Должен ли я использовать phantomJS (или браузер, например env), чтобы обеспечить способность DOM реагировать на компонент?

Реагировать компонент:

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

мне очень нравится 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(); 
    }); 

}); 

Я не знаю, как вы открыты для включения другой рамки в вашем наборе тестов, так не стесняйтесь игнорировать этот ответ, если он не подходит вашим целям.

Answer 2

Поскольку ваш $ .ajax издевается над шуткой, вы не получаете ожидаемого действия, потому что вы не получаете реальную функцию $ .ajax во время выполнения.

Вам нужно высмеять вашу функцию $ .ajax так, чтобы она изменила состояние реагирующего компонента. Вы можете сослаться на это сообщение jest для деталей. Используйте

$.ajax.mock.calls

Answer 3

Если вам нужно только издеваться запросы HTTP, вы можете также использовать nock. Sinon замечательный, но поставляется с большим количеством дополнительных функций, которые вам могут не понадобиться.

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

Обратите внимание, что вы, вероятно, следует назвать nock.cleanAll() после каждого теста, так что любые сбои или сохраняющиеся издевается не испортить следующий тест.

Answer 4

Это поздний ответ, но два ответа включают в себя насмешливые серверы, которые могут быть чрезмерными в некоторых случаях, и ответ, который фактически говорит о $.ajax.calls, приводит к неработающей ссылке, поэтому я дам краткое объяснение более простой способ сделать это.

шутка будет издеваться над вызовом $ .ajax, что означает, что $.ajax.calls[0][0] будет содержать перехваченный вызов $ .ajax. Затем вы можете получить доступ к обратным вызовам успешного или обратного вызова и вызвать их напрямую, например $.ajax.calls[0][0].success(/* Returned data here. */).

Затем вы можете продолжить работу с тестирования результатов вашего вызова ajax.