Question

我有一个react组件，在调用onSizeChange时调用prop方法onRef。

onRef包含dom api查询。

我想断言onSizeChange被调用。这在酶的安装中失败，因为getBBox（）在jsdom中不存在。错误：getBBox is not a function

如何让测试运行以便我可以断言onSizeChange？

更广泛的问题：你如何处理ref函数内部的dom api查询，这些查询在jsdom内部运行时不受支持，是否可以以某种方式进行模拟？

/* Abbreviated component class code */

onRef(textNode){
    if(!textNode){
        return;
    }
    const { onSizeChange } = this.props;
    const { width, height } = textNode.getBBox();
    onSizeChange({ width, height });

}

render(){
    return (
        <svg>
            <text 
                ref={textNode => this.onRef(textNode)}
                x="50%"
                y="50%" 
                alignmentBaseline="middle"
                textAnchor="middle"
                stroke="none">
                some text
             </text>
        </svg>
    );
}

酶测试：

it('should call onSizeChange handler on render', () => {
    const props = {
        onSizeChange: () => {}
    };
    const spy =  sinon.spy(props, 'onSizeChange');
    const wrapper = mount(<NodeLabel {...props} />);
    expect(spy.called).to.equal(true);
    spy.restore();
});

Answer 1

直到发现使用here的方法，我才自己解决问题：

有趣的是，您无需摆弄jsdom本身，只需使用getBBox覆盖beforeEach/afterEach的原型即可：

const originalGetBBox = SVGElement.prototype.getBBox;
beforeEach(() => SVGElement.prototype.getBBox = () => {
  return {<insert your mock data for bbox here>};
});
afterEach(() => (SVGElement.prototype.getBBox = originalGetBBox));

如何在酶测试中处理包含dom api方法的ref ref方法

1 个答案: