React - 如何存根使用 属性 初始化语法的组件方法?
React - how to stub component methods that use property initializer syntax?
我终于将我的组件从 React.createClass()
更新到 ES6 类。我在测试中看到的第一个错误是我的某些 sinon.stub()
调用失败,因为 jscodeshift -t react-codemod/transforms/class.js
将我的组件方法转换为使用 属性 初始化程序建议,即
class Foo extends React.Component {
componentWillMount() {
this.fetchSomeData(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.someProp !== this.props.someProp) {
this.fetchSomeData(nextProps);
}
}
fetchSomeData = (props) => {
...
};
render() {
...
}
}
我的问题是:如何使用这种新语法对 fetchSomeData()
进行存根?我的测试看起来像 sinon.stub(Foo.prototype, 'fetchSomeData');
不再有效,假设因为 fetchSomeData
不再在原型上。
谢谢!
在此示例中,fetchSomeData()
实际上确实附加到 this
而不是 Foo.prototype
,因此绝对没有办法在创建实例之前对方法进行存根。解决方法是将 fetchSomeData()
中的逻辑移动到 可以 存根的不同位置。或者使用不同的语法来定义方法。
我终于将我的组件从 React.createClass()
更新到 ES6 类。我在测试中看到的第一个错误是我的某些 sinon.stub()
调用失败,因为 jscodeshift -t react-codemod/transforms/class.js
将我的组件方法转换为使用 属性 初始化程序建议,即
class Foo extends React.Component {
componentWillMount() {
this.fetchSomeData(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.someProp !== this.props.someProp) {
this.fetchSomeData(nextProps);
}
}
fetchSomeData = (props) => {
...
};
render() {
...
}
}
我的问题是:如何使用这种新语法对 fetchSomeData()
进行存根?我的测试看起来像 sinon.stub(Foo.prototype, 'fetchSomeData');
不再有效,假设因为 fetchSomeData
不再在原型上。
谢谢!
在此示例中,fetchSomeData()
实际上确实附加到 this
而不是 Foo.prototype
,因此绝对没有办法在创建实例之前对方法进行存根。解决方法是将 fetchSomeData()
中的逻辑移动到 可以 存根的不同位置。或者使用不同的语法来定义方法。