Thử nghiệm đơn vị phản ứng thành phần tạo ra các cuộc gọi ajax bằng cách sử dụng JEST

Question

Tôi đã phản ứng thành phần gọi AJAX theo phương thức componentDidMount. Trong khi tôi cố gắng hiển thị nó bằng cách sử dụng React.addons.TestUtils, thành phần được hiển thị mà không cần thực hiện cuộc gọi AJAX. Làm thế nào tôi sẽ thử nghiệm thành phần phản ứng bằng cách sử dụng jest để nó làm cho cuộc gọi AJAX? Tôi có cần sử dụng phantomJS (hoặc trình duyệt như env) để cung cấp khả năng DOM để phản ứng lại thành phần không?

Phản ứng Thành phần:

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

Tôi thực sự thích Sinon.js và khả năng của mình để tạo ra một máy chủ giả mạo mà có thể đáp ứng các yêu cầu ajax cho mục đích thử nghiệm . Bạn có thể sử dụng nó cùng với Jest tốt. Dưới đây là một ví dụ về những gì nó có thể làm cho bạn:

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

}); 

Tôi không chắc chắn như thế nào mở bạn để bao gồm một khuôn khổ trong bộ kiểm tra của bạn để cảm thấy tự do để bỏ qua câu trả lời này nếu nó không phù hợp với mục đích của bạn.

Answer 2

Vì $ .ajax của bạn bị chế giễu bởi jest, bạn không nhận được hành vi mong đợi, bởi vì bạn không nhận được hàm $ .ajax thực trong thời gian chạy.

Bạn cần giả lập hàm $ .ajax để thay đổi trạng thái của thành phần phản ứng. Bạn có thể tham khảo bài viết jest này để biết chi tiết. Sử dụng

$.ajax.mock.calls

Answer 3

Nếu bạn chỉ cần để chế nhạo các yêu cầu http, bạn cũng có thể sử dụng nock. Sinon là tuyệt vời, nhưng đi kèm với rất nhiều chức năng bổ sung mà bạn có thể không cần.

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

Lưu ý rằng bạn có lẽ nên gọi nock.cleanAll() sau mỗi lần kiểm tra để cho bất kỳ hư hỏng hoặc mocks kéo dài không gây rối lên thử nghiệm tiếp theo.

Answer 4

Đây là câu trả lời trễ, nhưng hai câu trả lời liên quan đến máy chủ nhái, có thể quá mức trong một số trường hợp và câu trả lời thực sự nói về một liên kết bị hỏng, vì vậy tôi sẽ giải thích ngắn gọn về cách đơn giản hơn để làm điều đó.

jest sẽ thực hiện cuộc gọi $ .ajax, có nghĩa là $.ajax.calls[0][0] sẽ chứa cuộc gọi $ .ajax bị chặn. Sau đó, bạn có thể truy cập vào cuộc gọi lại thành công hoặc lỗi của cuộc gọi và gọi trực tiếp cho họ, ví dụ: $.ajax.calls[0][0].success(/* Returned data here. */).

Sau đó, bạn có thể tiến hành bình thường với kiểm tra kết quả cuộc gọi ajax của mình.