Question

Sinon并不是反应组件的残余物。

在我的反应组件中：

get statusTitle() {
  return 'Status Title'
}

我做了以下事情：

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

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

有人遇到过这个吗？

谢谢！

Answer 1

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

但是所有希望都没有丢失 - 毕竟这是javascript： - ）

我们可以做的是在原型链上进行存根，而不是在实例本身上：

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属性而不是实例：

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

这应该有希望做到你想要的，因为Enzyme安装的组件现在应该输出＆＃39; test＆＃39;从它的财产。

Sinon不会反应组件的残余物

1 个答案: