如何使用 jest.mock 模拟 useRef 和反应测试库

Question

我有一个测试用例，我需要模拟 useRef 以返回模拟当前值。 我试过 jest.mock 但它返回一个 HTMLDivElement 。

代码：

   const ref = useRef<HTMLDivElement | null>(null);

测试：

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



  React.useRef.mockReturnValue({ current: {offsetWith: 100} }); 

模拟回报

[ { type: 'return', value: { current: [HTMLDivElement] } } ]

Answer 1

@jonrsharpe 的建议是组件测试的一般原则，但你的问题是一个特例，涉及到 DOM 的一些属性和方法，例如offsetWidth和getBoundingClientRect()方法。 jsdom的运行环境无法返回，浏览器运行环境下的渲染引擎返回结果导致offsetWidth和getBoundingClientRect()方法返回的属性值始终为0 。

所以这里我们需要模拟ref 。

这里的mock ref也很特别。 除了对部分 mocking 使用jest.mock()之外， ref.current属性将在组件安装后由react分配。 为了拦截此操作，我们需要创建一个具有current ref.current属性的模拟ref object，使用Object.defineProperty()方法定义此属性的getter和setter赋值。

jest.spyOn方法接受 accessType 的第三个可选参数，它可以是 'get' 或 'set'，当你想分别监视 getter 或 setter 时，这被证明是有用的。

例如

index.tsx ：

import React, { useEffect, useRef } from 'react';

export default function App() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    console.log(ref.current?.offsetWidth);
  }, [ref]);
  return <div ref={ref}>app</div>;
}

index.test.tsx ：

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

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

const useMockRef = mocked(useRef);

describe('66332902', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });
  afterAll(() => {
    jest.resetAllMocks();
  });
  test('should mock ref and offsetWidth', () => {
    const ref = { current: {} };
    Object.defineProperty(ref, 'current', {
      set(_current) {
        if (_current) {
          jest.spyOn(_current, 'offsetWidth', 'get').mockReturnValueOnce(100);
        }
        this._current = _current;
      },
      get() {
        return this._current;
      },
    });
    useMockRef.mockReturnValueOnce(ref);
    render(<App />);
  });
});

测试结果：（见日志）

 PASS  examples/66332902/index.test.tsx (9.518 s)
  66332902
    ✓ should mock ref and offsetWidth (39 ms)

  console.log
    100

      at examples/66332902/index.tsx:6:13

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.106 s