Sinon.js - 在组件实例化之前存根 React 组件的函数？

Question

假设我有一个如下所示的组件：

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;

在我的测试中，我可以使用 TestUtils 渲染该组件，然后像这样删除方法：

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

但是有什么方法可以让 Sinon 在每次创建该组件的实例时自动存根该组件的功能？例如：

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

如果这不可能，是否有接近于提供我正在寻找的功能的潜在解决方案？

Answer 1

您需要覆盖 ExampleComponent.prototype 而不是 ExampleComponent。 ExampleComponent 是构造函数。 test() 等本地方法保存在 prototype.

中

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

Answer 2

我找到了解决问题的方法。

澄清一下，我的问题是我想去除属于在父组件下呈现的子组件的函数。所以像这样：

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;

如果我在我的一个测试中使用 TestUtils 来渲染 Parent，它会抛出我想避免的错误。所以我的问题是我需要在实例化 Child 的 test 函数之前将其存根。然后，当我渲染 Parent 时，Child 不会爆炸。

所提供的答案不太有效，因为 Parent 使用 require() 来获取 Child 的构造函数。我不确定为什么，但正因为如此，我无法在测试中删除 Child 的原型并期望测试通过，如下所示：

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

虽然我能够找到适合我需要的解决方案。我将我的测试框架从 Mocha 切换到 Jasmine，并开始使用 jasmine-react，它提供了几个好处，包括能够在 class 的函数实例化之前将其存根。这是一个有效解决方案的示例：

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

我希望这对遇到类似问题的其他人有所帮助。如果有人有任何问题，我很乐意提供帮助。

Sinon.js - 在组件实例化之前存根 React 组件的函数？

Sinon.js - stub React component's function before component is instantiated?

javascript

sinon

reactjs