reactjs - 使用 Jest 更改元素大小

Question

我的组件中有以下代码

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

我在组件中使用d3js和渲染图。但是当我运行测试时，有任何svg标签。我假设它发生是因为所有rect 的字段都等于 0。

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

ClientRect {上：89，右：808，下：689，左：8，宽度：800…}

当我运行测试时：

{ 底部：0，高度：0，左侧：0，右侧：0，顶部：0，宽度：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);
    });

});

Answer 2

不要忘记把原来的值放getBoundingClientRect回去，因为改变它可能会影响其他测试。

此外，无需在beforeEach:beforeAll中执行此操作。

describe("Mock `getBoundingClientRect`", () => {
  let boundingClientRect;

  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;

  beforeAll(() => {
    Element.prototype.getBoundingClientRect = () => boundingClientRect;
  });

  afterAll(() => {
    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
  });

  it("should mock `getBoundingClientRect`", () => {
    const element = document.createElement("div");
    boundingClientRect = new DOMRect(0, 0, 120, 120);
    const rect = element.getBoundingClientRect();
    expect(rect.width).toEqual(120);
  });
});

我从这个答案中得到了这个想法