React 測試庫 + Jest：如何測試接收數字然后對其進行格式化的組件

Question

我是測試組件的新手，我面臨一個問題：我有一個組件接收一個數字作為道具，然后對其進行格式化：

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

<StatNumber>{format(number)}</StatNumber>

我應該如何測試它？ 我無法通過getByText("")獲得，因為我還沒有格式化的數字，我應該在我的測試中創建一個功能嗎？

但是 react-testing-library 不測試邏輯，對吧？ 如果稍后我更改格式化方式會怎樣？

Answer 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 不測試邏輯，對吧？

是的，它會執行組件內部的任何邏輯。

如果稍后我更改格式化方式會怎樣？

您必須更新相應的測試。