reactjs - 使用 Jest 更改元素大小

Question

我的组件中有以下代码

var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();

我使用d3js并在组件中渲染图形。但是当我运行测试时，有任何 svg 标签。我认为发生这种情况是因为所有 矩形 字段都等于 0。

这是浏览器中 console.log(rect) 的输出:

ClientRect {top: 89, right: 808, bottom: 689, left: 8, width: 800…}

当我运行测试时:

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }

有没有办法设置元素的大小？

Answer 1

我的解决方案是模拟getBoundingClientRect(我目前使用的是jest 16.0.1)

describe('Mock `getBoundingClientRect`', () => {
    beforeEach(() => {
        Element.prototype.getBoundingClientRect = jest.fn(() => {
            return {
                width: 120,
                height: 120,
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
            }
        });
    });
    it('should mock `getBoundingClientRect`', () => {
        const element = document.createElement('span');
        const rect = element.getBoundingClientRect();
        expect(rect.width).toEqual(120);
    });

});