如何使用 Jest 和 React-Testing-Library 模拟和测试 scrollBy？

Question

Given the following component:

import * as React from "react";
import "./styles.css";

export default function App() {
  const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);

  const handleClick = () => {
    scrollContainerRef?.current?.scrollBy({ top: 0, left: 100 });
  };

  return (
    <div aria-label="wrapper" ref={scrollContainerRef}>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

How do I write a test using Jest and React Testing library to check that when the button is clicked, scrollBy is triggered on the wrapper?

I have tried the following and it doesn't seem to be working:

test('Clicking on button should trigger scroll',() => {
  const myMock = jest.fn();
  Object.defineProperty(HTMLElement.prototype, 'scrollBy', {
    configurable: true,
    value: myMock(),
  })
  render(<MyComponent />)
  fireEvent.click(screen.getByText(/click/i))
  expect(myMock).toHaveBeenCalledWith({top: 0, left: 100})
})

Answer 1

Since jsdom does NOT implements Element.scrollBy() method, see PR . We can create a mocked ref object with getter and setter to intercept React's assignment process to ref.current , and install spy or add mock in the process.

Eg

App.tsx :

import * as React from 'react';

export default function App() {
  const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);

  const handleClick = () => {
    scrollContainerRef?.current?.scrollBy({ top: 0, left: 100 });
  };

  return (
    <div aria-label="wrapper" ref={scrollContainerRef}>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

App.test.tsx :

import React, { useRef } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { mocked } from 'ts-jest/utils';
import App from './App';

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

const useMockRef = mocked(useRef);

describe('63702104', () => {
  afterAll(() => {
    jest.resetAllMocks();
  });
  test('should pass', () => {
    const ref = { current: {} };
    const mScrollBy = jest.fn();
    Object.defineProperty(ref, 'current', {
      set(_current) {
        if (_current) {
          _current.scrollBy = mScrollBy;
        }
        this._current = _current;
      },
      get() {
        return this._current;
      },
    });
    useMockRef.mockReturnValueOnce(ref);
    render(<App />);
    fireEvent.click(screen.getByText(/click/i));
    expect(mScrollBy).toBeCalledWith({ top: 0, left: 100 });
  });
});

test result:

 PASS  examples/63702104/App.test.tsx (9.436 s)
  63702104
    ✓ should pass (33 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |       75 |     100 |     100 |                   
 App.tsx  |     100 |       75 |     100 |     100 | 7                 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.21 s