React 16版本中如何用React Testing Library mock useState做单元测试？

在React 16里，你可以通过两种方式实现需求：优先推荐模拟真实场景触发状态变化，若确需直接控制状态，也可以mock useState。

方法一：模拟真实场景触发状态变化（推荐） #

React Testing Library提倡测试组件的用户可见行为，而非内部实现。如果isOverflowed是根据元素内容是否溢出计算得出的，你可以给组件传入足够长的product文本，触发元素溢出逻辑，自动将isOverflowed设为true，再断言Tooltip是否渲染：

import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('renders Tooltip when content overflows', () => {
  // 传入超长文本触发溢出逻辑
  const longProductText = '这是一段足够长的产品名称，会导致容器内容溢出触发Tooltip';
  render(<YourComponent product={longProductText} />);
  
  // 根据Tooltip的title查找元素并断言
  expect(screen.getByTitle(longProductText)).toBeInTheDocument();
});

方法二：直接Mock useState #

如果必须强制控制isOverflowed的状态，可以用Jest mock React的useState钩子：

import React from 'react';
import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

// Mock React的useState，保留其他React功能不变
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

describe('YourComponent', () => {
  // 每个测试用例前重置mock，避免干扰
  beforeEach(() => {
    React.useState.mockClear();
  });

  test('renders Tooltip when isOverflowed is true', () => {
    // 让useState返回[true, 空函数]，强制isOverflowed为true
    React.useState.mockImplementation(() => [true, jest.fn()]);
    
    render(<YourComponent product="测试产品" />);
    
    // 断言Tooltip存在
    expect(screen.getByTitle('测试产品')).toBeInTheDocument();
  });
});

注意事项 #

• 直接mock useState会耦合组件的内部实现，如果后续组件修改了状态逻辑，测试可能失效，因此优先选择方法一。
• 若测试文件中有多个用例，务必在每个用例前重置useState的mock，避免不同用例互相干扰。

内容的提问来源于stack exchange，提问作者Anaswara Vinilkumar