Il test dell'unità reagisce al componente che effettua chiamate ajax utilizzando JEST

Question

Ho un componente di risposta che effettua chiamate AJAX nel metodo componentDidMount. Mentre provo a renderizzarlo usando React.addons.TestUtils, il componente viene sottoposto a rendering senza effettuare chiamate AJAX. Come potrei testare la reazione del componente usando il jest in modo che faccia una chiamata AJAX? Dovrei aver bisogno di usare phantomJS (o browser come env) per fornire le abilità DOM alla reazione del componente?

Reagire Componente:

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

mi piace molto Sinon.js e la sua capacità di creare un server di falso in grado di rispondere alle richieste Ajax per scopi di test . Puoi usarlo a fianco di Jest bene. Ecco un esempio di ciò che può fare per voi:

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

}); 

io non sono sicuro di come aperta si è di incluso un altro quadro nella vostra suite di test quindi sentitevi liberi di ignorare questa risposta se non soddisfa le vostre scopi.

Answer 2

Dato che il tuo $ .ajax viene deriso per scherzo, non si ottiene il comportamento previsto, perché non si ottiene una vera e propria funzione $ .ajax in runtime.

È necessario prendere in giro la funzione $ .ajax in modo che cambi lo stato del componente di reazione. È possibile consultare questo post jest per i dettagli. Utilizzare

$.ajax.mock.calls

Answer 3

Se avete solo bisogno di prendere in giro le richieste http, è anche possibile utilizzare nock. Sinon è grandioso, ma offre molte funzionalità aggiuntive di cui potresti non aver bisogno.

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

Nota che probabilmente si dovrebbe chiamare nock.cleanAll() dopo ogni prova in modo che eventuali guasti o deride persistenti non lo fanno rovinare il prossimo test.

Answer 4

Questa è una risposta tardiva, ma due delle risposte implicano server di derisione, che possono essere eccessivi in ​​alcuni casi, e la risposta che effettivamente parla di $.ajax.calls porta a un collegamento interrotto, quindi darò una breve spiegazione di il modo più semplice per farlo

jest deriderà la chiamata $ .ajax, che significa che $.ajax.calls[0][0] conterrà la chiamata $ .ajax intercettata. È quindi possibile accedere alle chiamate di successo o di errore della chiamata e chiamarle direttamente, ad es. $.ajax.calls[0][0].success(/* Returned data here. */).

Quindi è possibile procedere normalmente con il test dei risultati della chiamata ajax.