在为我正在工作的项目编写单元测试时,我遇到了同样的问题,我认为我有一个很好的模式来解决它。希望它有所帮助:
语境
这是一个 React 组件的示例,该组件具有handleClick
使用粗箭头表示法定义的方法。
import React, { Component } from 'react';
class Foo extends Component {
componentWillMount() {
this.handleClick();
}
handleClick = (evt) => {
// code to handle click event...
}
render() {
return (
<a href="#" onClick={this.handleClick}>some foo link</a>
);
}
}
问题
如此链接中所述, Babel将转译代码,以便该handleClick
方法仅在实例化后可用(检查生成的构造函数的第31 到 33 行)
这里的问题是,有时您需要在实例化类之前访问使用粗箭头符号定义的方法。
例如,假设您正在为componentWillMount
类方法编写单元测试,并且您想要存根,handleClick
以便您只测试所需的单元。但是现在您遇到了一个问题,因为您只能handleClick
在实例化之后访问,并且componentWillMount
方法将React
作为其实例化生命周期的一部分自动调用。
解决方案
以下是我如何应用一个简单的模式来解决这样的问题:
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';
import Foo from './foo';
describe('Foo', () => {
describe('componentWillMount method', () => {
const handleClickStub = sinon.stub();
class FooWrapper extends Foo {
constructor(props) {
super(props);
this.handleClick = handleClickStub;
}
}
it('should register a click event listener to the externalElement property', () => {
handleClickStub.reset();
mount(<FooWrapper />);
expect(handleClickStub.calledOnce).to.be.true;
});
});
});
解释
在初始化原始组件后,我已将原始Foo
组件包装到FooWrapper
其构造函数的 where 我用存根版本替换原始handleClick
方法,从而允许我对我的componentWillMount
类进行属性测试。