使用 Jest + React 测试库测试函数返回值的最佳实践答案

【问题标题】：Best practice testing return value from a function with Jest + React Testing Library使用 Jest + React 测试库测试函数返回值的最佳实践
【发布时间】：2021-12-09 20:16:15
【问题描述】：

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

逻辑函数

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)
  })
})

【问题讨论】：

标签： reactjs function jestjs react-testing-library

【解决方案1】：

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

无论您使用静态数据还是动态生成的测试数据，都要保持简单。使用简单的测试数据，您还可以更轻松地预测所需的结果。

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

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

【讨论】：