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，它提供了一些好处，包括在实例化之前将类的函数存根的能力。以下是工作解决方案的示例：

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组件的功能是什么？

2 个答案: