Sinon.js - stub Chức năng của thành phần phản ứng trước khi thành phần được khởi tạo?

Question

Hãy nói rằng tôi có một bộ phận trông như thế này:

var React = require('react/addons'); 

var ExampleComponent = React.createClass({ 
    test : function() { 
     return true; 
    }, 
    render : function() { 
     var test = this.test(); 
     return (
      <div className="test-component"> 
       Test component - {test} 
      </div> 
     ); 
    } 
}); 

module.exports = ExampleComponent; 

Trong thử nghiệm của tôi, tôi có thể làm cho thành phần này sử dụng TestUtils, sau đó còn sơ khai ra các phương pháp như vậy:

var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>); 
sinon.stub(renderedComponent, 'test').returns(false); 
expect(renderedComponent.test).toBe(false); //passes 

Nhưng có một cách tôi có thể nói với Sinon để tự động phân tích chức năng của một thành phần mỗi khi một cá thể của thành phần đó được tạo ra? Ví dụ:

sinon.stubAll(ExampleComponent, 'test').returns(false); //something like this 
var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>); 
expect(renderedComponent.test).toBe(false); //I'd like this to pass 

Nếu không thể, có giải pháp tiềm năng nào gần đến việc cung cấp chức năng tôi đang tìm không?

Answer 1

Tôi đã tìm ra giải pháp cho vấn đề của mình.

Để làm rõ, vấn đề của tôi là tôi muốn phân tích các hàm thuộc về các thành phần con được hiển thị trong thành phần chính. Vì vậy, một cái gì đó như thế này:

parent.js

var Child = require('./child.js'); 
var Parent = React.createClass({ 
    render : function() { 
     return (
      <div className="parent"> 
       <Child/> 
      </div> 
     ); 
    } 
}); 
module.exports = Parent; 

child.js

var Child = React.createClass({ 
    test : function() { 
     return true; 
    }, 
    render : function() { 
     if (this.test) { 
      throw('boom'); 
     } 
     return (
      <div className="child"> 
       Child 
      </div> 
     ); 
    } 
}); 
module.exports = Child; 

Nếu tôi được sử dụng để render TestUtils mẹ trong một trong các bài kiểm tra của tôi, nó sẽ ném lỗi, mà tôi muốn tránh. Vì vậy, vấn đề của tôi là tôi cần phải khai thác chức năng test của Trẻ trước khi nó được khởi tạo. Sau đó, khi tôi làm cho phụ huynh, con sẽ không thổi lên.

Câu trả lời được cung cấp không hoàn toàn hoạt động, vì cha mẹ sử dụng require() để lấy hàm tạo con. Tôi không chắc chắn lý do tại sao, nhưng vì lý do đó, tôi không thể đưa ra mẫu thử nghiệm của Trẻ em trong thử nghiệm của tôi và mong đợi thử nghiệm để vượt qua, như vậy:

var React = require('react/addons'), 
    TestUtils = React.addons.TestUtils, 
    Parent = require('./parent.js'), 
    Child = require('./child.js'), 
    sinon = require('sinon'); 

describe('Parent', function() { 
    it('does not blow up when rendering', function() { 
     sinon.stub(Child.prototype, 'test').returns(false); 
     var parentInstance = TestUtils.renderIntoDocument(<Parent/>); //blows up 
     expect(parentInstance).toBeTruthy(); 
    }); 
}); 

Tôi đã tìm được giải pháp phù hợp với nhu cầu mặc dù. Tôi đã chuyển khuôn khổ thử nghiệm của mình từ Mocha sang Jasmine và tôi bắt đầu sử dụng jasmine-react, cung cấp một số lợi ích, bao gồm khả năng phân tích chức năng của lớp trước khi nó được khởi tạo. Dưới đây là ví dụ về giải pháp làm việc:

var React = require('react/addons'), 
    Parent = require('./parent.js'), 
    Child = require('./child.js'), 
    jasmineReact = require('jasmine-react-helpers'); 

describe('Parent', function() { 
    it('does not blow up when rendering', function() { 
     jasmineReact.spyOnClass(Child, 'test').and.returnValue(false); 
     var parentInstance = jasmineReact.render(<Parent/>, document.body); //does not blow up 
     expect(parentInstance).toBeTruthy(); //passes 
    }); 
}); 

Tôi hy vọng điều này sẽ giúp người khác có vấn đề tương tự. Nếu có ai có bất kỳ câu hỏi nào, tôi sẽ vui lòng giúp đỡ.

Answer 2

Bạn cần ghi đè ExampleComponent.prototype thay vì . là một hàm tạo. Các phương pháp cục bộ như test() được lưu trong số đó là prototype.

sinon.stub(ExampleComponent.prototype, 'test').returns(false); 
var renderedComponent = TestUtils.renderIntoDocument(<ExampleComponent/>); 
expect(renderedComponent.test).toBe(false); //passes