React Testing Library+Jest如何测试接收数字并格式化的组件

核心测试原则：组件测试关注输入props后是否输出符合预期的UI，和内部实现逻辑无关，你不需要关心内部用了什么格式化方法，只要最终渲染结果正确即可。

方案1：硬编码预期结果（最推荐） #

你不需要动态生成预期值，直接根据测试用例的输入，提前计算好对应的格式化结果写在测试里即可。
比如你传入1000，除以100后是10，对应的巴西雷亚尔格式化结果固定为R$ 10,00，直接写在断言里：

import { render, screen } from '@testing-library/react';
import StatComponent from './你的组件路径';

test('传入数字正确渲染为BRL货币格式', () => {
  // 传入props值为1000
  render(<StatComponent number={1000} />);
  // 直接匹配预期的格式化结果
  expect(screen.getByText('R$ 10,00')).toBeInTheDocument();
});

这个方案的优势是测试逻辑简单直观，完全不依赖组件内部实现，哪怕你后续重构格式化逻辑，只要业务需求不变，测试预期就不需要修改。如果是格式化规则本身随需求调整，你只需要同步更新测试的预期值即可，属于需求变更后的正常维护流程。

方案2：抽离公共格式化函数复用 #

如果你的格式化规则会频繁调整，不想每次改规则都修改所有组件测试的硬编码值，可以把格式化逻辑抽成独立的公共工具函数：

// src/utils/format.js
export const formatNumberToBRL = (number) => (number / 100).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });

组件内直接引入该函数使用，测试代码里也引入同一个函数生成预期值：

import { render, screen } from '@testing-library/react';
import StatComponent from './你的组件路径';
import { formatNumberToBRL } from 'src/utils/format';

test('传入数字正确渲染为BRL货币格式', () => {
  const testValue = 2599;
  render(<StatComponent number={testValue} />);
  // 直接复用业务代码里的格式化函数生成预期值
  expect(screen.getByText(formatNumberToBRL(testValue))).toBeInTheDocument();
});

同时单独给formatNumberToBRL函数写单元测试覆盖各种边界情况（比如0、负数、大数等）即可。这种方案下你修改格式化规则时，只需要修改工具函数和对应的单元测试，所有组件测试的代码不需要调整，自动同步新的规则。

相关疑问说明 #

你提到的「RTL不测试内部逻辑」是正确的，以上两种方案都没有测试内部实现：你没有去断言format函数有没有被调用、有没有接收到正确参数，只是断言组件最终渲染的内容符合预期，完全符合RTL的测试理念。

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