React Ref的offsetheight，即使在内容加载后，也为戏j测试用例始终返回“ 0”

Question

我正在使用反应测试库和笑话。在componentdidupdate中，尝试获取“ this.testRef.current.offsetHeight ”，即使加载了内容，offsetHeight也仍为 0 。我想要DOM的确切offsetHeight，因为有一些基于它的条件。

react-testing-library和jest中是否有可能解决的方法。

我正在使用 dangerouslySetInnerHTML 绑定testRef元素的html内容。

Answer 1

您可以执行以下操作：

  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
    HTMLElement.prototype,
    'offsetHeight'
  );
  const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
  beforeAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
      configurable: true,
      value: 200,
    });
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { 
      configurable: true, value: 200 
    });
  });

  afterAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
  });