reactjs - Sinon 不会对 react 组件的 getter 进行 stub

Question

Sinon 不会对 react 组件的 getter 进行 stub 。

在我的 react 组件中:

get statusTitle() {
  return 'Status Title'
}

我执行以下操作:

const wrapper = shallow(<SomeComponent />)
const stubStatusTitle = stub(wrapper, 'statusTitle').get(() => 'test')

但这不起作用。无论如何，它会返回我“状态标题”。
甚至 const stubStatusTitle = stub(wrapper.instance(), 'statusTitle').get(() => 'test')不起作用。

有人遇到过这个吗？

谢谢!

Answer 1

您的问题是该实例是在您的控制之外创建的。作为 JSX 表达式 <SomeComponent />相当于 javascript 表达式 React.createElement(SomeComponent, null) ，您可以看到从 SomeComponent 创建实例的点函数/类隐藏在 React 中。

但所有的希望都没有失去——毕竟这是 javascript :-)

我们可以做的是在原型(prototype)链上做 stub ，而不是在实例本身上:

class MyComponent {
    get foo() {
        return 123;
    }
}

const obj = new MyComponent;
console.log( obj.foo); // => '123'

Object.defineProperty(MyComponent.prototype, 'foo', {get: ()=>42})
console.log( obj.foo); // => '42'

使用它，并且知道实例是从 SomeComponent 创建的类，我们可以修改 getStatus原型(prototype)上的属性而不是实例上的属性:

const stubStatusTitle = stub(SomeComponent.prototype, 
                             'statusTitle')
                        .get(() => 'test');

这应该可以达到您的预期，因为 Enzyme 安装的组件现在应该从其属性中输出“测试”。