使用 Jest + React 测试库从函数中测试 return 值的最佳实践

Question

我有一个非常简单的工资计算器函数，它接收表单内的输入值作为参数，最后 returns 计算结果。

逻辑函数

export function calcAnnualSalary(
  monthlySalary: string,
  healthPlan?: string,
  transpostationTicket?: string,
  mealTicket?: string,
  valueSaturday?: boolean
) {
  const annualSalary =
    parseFloat(monthlySalary.replace(/\./g, '').replace(',', '.')) * 12
  const thirteenth = parseFloat(
    monthlySalary.replace(/\./g, '').replace(',', '.')
  )
  const extraHoliday =
    parseFloat(monthlySalary.replace(/\./g, '').replace(',', '.')) / 3
  const totalAnnualCrude = annualSalary + thirteenth + extraHoliday

  return {
    annualSalary,
    thirteenth,
    extraHoliday,
    totalAnnualCrude,
  }
}

测试

据此，我用硬编码值创建了一个非常简单的测试，我想知道这是否是测试函数计算逻辑的最佳实践。例如，为了避免硬编码，我应该在表单中获取值，它有什么建议？

import {CalcAnnualSalary} from '~src/components/app/Calculators/CalcAnnualSalary'
import * as Calc from '~src/utils/calculators/'
import * as Lib from '~src/utils/testing-library'

describe('CalculatorAnnualSalary', () => {
  it('expect return gross annual salary', () => {
    const {annualSalary} = Calc.calcAnnualSalary('1.000,00')
    expect(annualSalary).toEqual(12000)
  })
})

Answer 1

在测试中，您应尽可能简单地提供测试替身和测试数据。这降低了复杂性并促进了测试。

无论您使用静态数据还是动态生成的测试数据，都要保持简单。通过简单的测试数据，你也可以更容易地预测出想要的结果。

测试是可预测的，在写测试用例的时候，你应该在运行测试用例之前提供你想要的结果，如果你的输入很复杂，想要的结果很难计算，你需要执行用这些数据在你的大脑中编码。

使用简单的测试数据来测试每个代码分支，一个函数的逻辑片段。

使用 Jest + React 测试库从函数中测试 return 值的最佳实践

Best practice testing return value from a function with Jest + React Testing Library

function

reactjs

jestjs

react-testing-library