React 测试库 + Jest：如何测试接收数字的组件然后对其进行格式化

Posted 2023-03-13

【中文标题】React 测试库 + Jest：如何测试接收数字的组件然后对其进行格式化

【英文标题】：React testing library + Jest: How to test a component that receives a number then format it

【发布时间】：2021-09-25 10:45:25

【问题描述】：

我是测试组件的新手，我遇到了一个问题：我有一个组件接收一个数字作为道具，然后对其进行格式化：

const format = (number) => (number/ 100).toLocaleString("pt-BR", style: "currency", currency: "BRL" );

<StatNumber>format(number)</StatNumber>

我应该如何测试它？我无法通过getByText("")，因为我还没有格式化的数字，我应该在我的测试中创建一个函数吗？

但是 react-testing-library 不测试逻辑，对吧？如果以后我改变格式怎么办？

【参考方案1】：

是的，您可以使用 React 测试库非常轻松地测试业务逻辑：

test('formatting number', async () => 
  render(<StatNumber number=5 />)

  expect(getByText('R$ 0,05')).toBeInTheDocument();
)

test('formatting big number', async () => 
  render(<StatNumber number=1999 />)

  expect(getByText('R$ 19,99')).toBeInTheDocument();
)

我应该如何测试它？

React 测试库不关心组件的业务逻辑（实现细节），只关心组件在 DOM 中呈现的内容。

我无法通过 getByText("") 获取，因为我没有格式化的数字 然而，我应该在我的测试中创建一个函数吗？

不需要这个，因为 React 测试库会自己执行函数。

但是 react-testing-library 不测试逻辑，对吧？

是的，它会执行组件内部的任何逻辑。

如果以后我改变格式怎么办？

您必须更新相应的测试。

【讨论】：

谢谢！看起来很简单，但我真的被困住了哈哈

别担心，乐于助人:)