Question

我有一个缺陷，我需要在加载新数据后重置元素的滚动位置，以便滚动回到元素的顶部。我在componentDidUpdate（）中处理该操作，并且该行为按预期方式正常工作。但是，我很难用酶和笑话为其编写成功的测试。

以下是我认为是相关项目的组件片段：

this.gridNode = null;

... 

componentDidUpdate(prevProps) {
  const node = this.getGridWrapperNode();
  if (!isEqual(this.props.data, prevProps.data) && (node && node.scrollTop > 0)) {
    node.scrollTop = 0;
  }
}

...

getGridWrapperNode = () => (
  this.gridNode && this.gridNode.getElementsByClassName('datagrid-grid-wrapper')[0]
);

这是测试用例：

  it('should reset gridWrapperNode scrollTop position if data has changed', () => {
    const mounted = mount(<Grid {...props} />);

    const element = document.createElement('div');
    element.classList.add('datagrid-grid-wrapper');
    element.scrollTop = 46;

    mounted.instance().gridNode = element;

    mounted.setProps({
      ...props,
      data: [{ val: 'ya' }],
    });

    const el = mounted.instance().gridNode;
    expect(el.scrollTop).toEqual(0);
  });

但是，测试始终失败，无法期望该值为原始设置值46。我是否没有正确编写测试，因为它没有更新，因此元素的scrollTop没有设置回0？还是我在componentDidMount()中正在做的事情？

测试componentDidUpdate（）中元素的更改

0 个答案: