在 React + Enzyme 中模拟 clientHeight 和 scrollHeight 进行测试

IT技术 reactjs unit-testing jestjs enzyme
2021-05-02 09:04:17

我们有一个名为 ScrollContainer 的 React 组件，当它的内容滚动到底部时会调用一个 prop 函数。

基本上：

componentDidMount() {
  const needsToScroll = this.container.clientHeight != this.container.scrollHeight

  const { handleUserDidScroll } = this.props

  if (needsToScroll) {
    this.container.addEventListener('scroll', this.handleScroll)
  } else {
    handleUserDidScroll()
  }
}

componentWillUnmount() {
  this.container.removeEventListener('scroll', this.handleScroll)
}

handleScroll() {
  const { handleUserDidScroll } = this.props
  const node = this.container
  if (node.scrollHeight == node.clientHeight + node.scrollTop) {
    handleUserDidScroll()
  }
}

this.container 在render方法中设置如下：

<div ref={ container => this.container = container }>
  ...
</div>

我想使用 Jest + Enzyme 测试这个逻辑。

我需要一种方法来强制 clientHeight、scrollHeight 和 scrollTop 属性成为我为测试场景选择的值。

使用 mount 而不是shallow，我可以获得这些值，但它们始终为0。我还没有找到任何方法将它们设置为非零值。我可以设置容器wrapper.instance().container = { scrollHeight: 0 }等等，但这只会修改测试上下文而不是实际组件。

任何建议，将不胜感激！

3个回答

Jest spyOn 可用于模拟 22.1.0+ 版本的 getter 和 setter。见笑话文档

我使用下面的代码来模拟document.documentElement.scrollHeight 的实现 

const scrollHeightSpy = jest
                    .spyOn(document.documentElement, 'scrollHeight', 'get')
                    .mockImplementation(() => 100);

它返回 100 作为 scrollHeight 值。

JSDOM 不做任何实际的渲染——它只是模拟 DOM 结构——所以元素尺寸之类的东西不会像你想象的那样计算。如果您通过方法调用获取维度，则可以在测试中模拟这些维度。例如：

 beforeEach(() => {
    Element.prototype.getBoundingClientRect = jest.fn(() => {
          return { width: 100, height: 10, top: 0, left: 0, bottom: 0, right: 0 };
        });
  });

这显然不适用于您的示例。可以覆盖元素上的这些属性并模拟对它们的更改；但我怀疑这不会导致特别有意义/有用的测试。

另请参阅此线程

简化的解决方案只需要模拟useRef或createRef因为被测组件取决于来自 的返回值useRef：

import { useRef } from 'react';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useRef: jest.fn(),
}));

test('test ref', () => {
  useRef.mockReturnValue({
    // insert required properties here
  });
  // do assertions as normal
});
其它你可能感兴趣的问题
上一篇从react索引链接到 css 文件 下一篇serve -s build 指定端口号