React 18组件内部Add方法单元测试方案（替代Enzyme）

在React 18的函数组件里，没法像类组件那样通过实例获取内部定义的函数（函数组件本身没有实例），而且@testing-library/react的设计核心是测试组件行为而非内部实现。但如果一定要测试这个Add方法，有两种务实的方式：

方法一：将内部函数抽离到组件外部（最推荐） #

把Add从组件里拆出来变成独立工具函数，既能单独测试，也能在组件内正常调用，还能实现代码解耦：

修改后的组件代码：

// 抽离为独立可导出的函数
export const Add = (x: number, y: number): number => {
  return x + y;
};

export default function Calc() {
  useEffect(() => {
    // do something
  }, []); // 注意添加依赖数组，避免useEffect无限触发

  return (<></>);
}

对应的测试用例：

import { Add } from './Calc';

test('Add函数能正确计算两数之和', () => {
  expect(Add(2, 2)).toBe(4);
  expect(Add(-1, 3)).toBe(2);
});

方法二：通过组件行为间接测试（符合testing-library设计理念） #

如果Add是为了处理组件内的业务逻辑、最终会反映到UI上，那应该测试UI的变化，而非直接调用内部函数。比如调整组件让Add的计算结果能通过交互展示：

修改后的组件代码：

import { useState, useEffect } from 'react';

export default function Calc() {
  const [result, setResult] = useState(0);

  useEffect(() => {
    // do something
  }, []);

  const Add = (x: number, y: number): number => {
    return x + y;
  };

  const handleCalculate = () => {
    setResult(Add(2, 2));
  };

  return (
    <div>
      <button onClick={handleCalculate}>计算2+2</button>
      <span data-testid="calc-result">{result}</span>
    </div>
  );
}

对应的测试用例：

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

test('点击计算按钮后能正确显示结果', () => {
  render(<Calc />);
  
  fireEvent.click(screen.getByText('计算2+2'));
  
  expect(screen.getByTestId('calc-result')).toHaveTextContent('4');
});

注意：不推荐强行去获取函数组件的内部函数——函数组件的内部变量封装在闭包里，没有公开访问入口，这种测试方式不仅实现复杂，还会让测试变得脆弱，组件内部逻辑稍有调整就可能导致测试失败。

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