Компонент за реагиране на единица, който прави ajax извиквания с помощта на JEST

Имам компонент за реакция, който прави AJAX извикване в componentDidMount метод. Докато се опитвам да го изобразя с помощта на React.addons.TestUtils, компонентът се изобразява, без да се прави AJAX извикване. Как бих тествал реагиращ компонент с помощта на шега, така че да направи AJAX извикване? Трябва ли да използвам phantomJS (или браузър като env), за да осигуря DOM способности за реакция на компонент?

Компонент на React:

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

reactjs unit-testing jestjs ajax reactjs-testutils
person alok mittal    schedule 24.06.2015    source източник

Отговори (4)


arrow_upward
13
arrow_downward

Наистина харесвам 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();
    });

});

Не съм сигурен доколко сте готови да включите друга рамка във вашия тестов пакет, така че не се колебайте да игнорирате този отговор, ако не отговаря на вашите цели.

person Michael Parker    schedule 24.06.2015

arrow_upward
2
arrow_downward

Два от отговорите включват подигравателни сървъри, което може да бъде прекалено в някои случаи. Ще дам кратко обяснение на по-простия начин да го направите.

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

Настройката по подразбиране за Jest автоматично се подиграва на всичко, освен на неща, които сте задали специално да не се подиграват. Да кажем, че извиквате $.ajax с success и error обратно извикване. $.ajax.calls е шеговито предоставен масив от извиквания на функцията $.ajax. Получаваме първото извикване, като индексираме [0] и след това първия аргумент с друг [0] ($.ajax обикновено има само един аргумент, JavaScript речник/обект). Това ни дава достъп до обратните извиквания за успех и грешка, което ни позволява да предаваме всеки произволен вход, който очакваме за тези функции, и да ги тестваме.

След това можете да продължите нормално с тестването на резултатите от вашето ajax повикване.

person Slithy Toves    schedule 31.10.2016

arrow_upward
1
arrow_downward

Ако трябва само да имитирате 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() след всеки тест, така че всякакви неуспехи или продължителни подигравки да не объркат следващия тест.

person Luke    schedule 20.10.2016

arrow_upward
0
arrow_downward

Тъй като вашият $.ajax се подиграва на шега, вие не получавате очакваното поведение, защото не получавате истинска $.ajax функция по време на изпълнение.

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

$.ajax.mock.calls

person Bharanidharan K    schedule 27.06.2015