Javascript Jest/React模拟scrollBy和.getBoundingClientRect函数

我有一个函数handleClick，它在一个元素上使用scrollBy，该元素使用getBoundingClientRect获取其第一个参数。我正试图用jest/酶来测试这一点

class myClass extends Component  {
    ...
    ...
    handleClick () {
        document.getElementById('first-id').scrollBy(document.getElementById('second-id').getBoundingClientRect().width, 0);
    }

    render() {
        return (
            <button className="my-button" onClick={this.handleClick()}>scroll</button>
        );
    }
}

---

很抱歉，如果之前已经回答了这个问题，但我看不到任何符合我的场景的内容。提前感谢。

在
getElementById
的第一个结果上调用scrollBy

，在

getElementById

的第二个结果上调用

getBoundingClientRect

，因此您需要在模拟中返回的对象上包含这两个函数

下面是一个让您开始的工作示例：

import * as React from 'react';
import { mount } from 'enzyme';

class MyClass extends React.Component {
  handleClick() {
    document.getElementById('first-id').scrollBy(document.getElementById('second-id').getBoundingClientRect().width, 0);
  }

  render() {
    return (
      <button className="my-button" onClick={this.handleClick}>scroll</button>
    );
  }
}

it('calls scrollBy with correct params', () => {
  const props = {};
  const myClassWrapper = mount(<MyClass {...props} />);
  const scrollBySpy = jest.fn();
  const getBoundingClientRectSpy = jest.fn(() => ({ width: 100 }));
  global.document.getElementById = jest.fn(() => ({
    scrollBy: scrollBySpy,
    getBoundingClientRect: getBoundingClientRectSpy  // <= add getBoundingClientRect
  }));

  myClassWrapper.find('.my-button').simulate('click');
  expect(scrollBySpy).toHaveBeenCalledWith(100, 0);  // Success!
});

import*as React from'React'；
从“酶”导入{mount}；
类MyClass扩展了React.Component{
handleClick（）{
document.getElementById（'first-id'）.scrollBy（document.getElementById（'second-id'）.getBoundingClientRect（）.width，0）；
}
render（）{
返回(
纸卷
);
}
}
它（'使用正确的参数调用scrollBy'，（）=>{
const props={}；
const myClassWrapper=mount（）；
const scrollBySpy=jest.fn（）；
const getBoundingClientRectSpy=jest.fn（（）=>（{width:100}））；
global.document.getElementById=jest.fn（（）=>({
scrollBy:scrollBySpy，
getBoundingClientRect:getBoundingClientRect//
Error: Uncaught [TypeError: document.getElementById(...).getBoundingClientRect is not a function] 

import * as React from 'react';
import { mount } from 'enzyme';

class MyClass extends React.Component {
  handleClick() {
    document.getElementById('first-id').scrollBy(document.getElementById('second-id').getBoundingClientRect().width, 0);
  }

  render() {
    return (
      <button className="my-button" onClick={this.handleClick}>scroll</button>
    );
  }
}

it('calls scrollBy with correct params', () => {
  const props = {};
  const myClassWrapper = mount(<MyClass {...props} />);
  const scrollBySpy = jest.fn();
  const getBoundingClientRectSpy = jest.fn(() => ({ width: 100 }));
  global.document.getElementById = jest.fn(() => ({
    scrollBy: scrollBySpy,
    getBoundingClientRect: getBoundingClientRectSpy  // <= add getBoundingClientRect
  }));

  myClassWrapper.find('.my-button').simulate('click');
  expect(scrollBySpy).toHaveBeenCalledWith(100, 0);  // Success!
});