如何处理酶测试中包含 DOM API 方法的反应参考方法

Question

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

onRef包含一个 DOM API 查询。

我想断言大小更改被调用。这在酶的安装中失败了，因为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

我自己未能解决这个问题，直到我找到了这里使用的方法：

它的好处是没有必要摆弄 jsdom 本身，您只需使用 beforeEach/afterEach 覆盖getBBox的原型：

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