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

【问题标题】：How to mock useRef using jest.mock and react testing library如何使用 jest.mock 模拟 useRef 和反应测试库
【发布时间】：2021-05-25 17:03:28
【问题描述】：

我有一个测试用例，我需要模拟 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] } } ]

【问题讨论】：

不要模拟任何的 React API，你不拥有它。测试组件的行为，而不是实现。
我明白了。有没有办法测试当前参考值（如 offsetWidth）是否发生变化。谢谢

标签： reactjs unit-testing jestjs react-hooks react-testing-library

【解决方案1】：

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

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

这里的模拟ref也很特别。除了使用jest.mock() 进行部分模拟外，ref.current 属性将在组件挂载后由react 分配。为了拦截这个操作，我们需要创建一个带有current对象属性的模拟ref对象，使用Object.defineProperty()方法为这个ref.current属性定义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

【讨论】：

这不起作用，如果在<App> 内部其他组件调用useRef。知道如何解决这个@slideshowp2 吗？