功能测试与单元测试结果不一致

Question

双越老师，我扩展了单元测试的内容如下：

import { curryFunc } from "./curry-function"

describe('函数柯里化测试', () => {
  it('正常情况', () => {
    function add(num1: number, num2: number, num3: number): number {
      return num1 + num2 + num3
    }
    const curryAdd = curryFunc(add)
    const res = add(10, 20, 30)
    const res1 = curryAdd(10)(20)(30)
    const res2 = curryAdd(10, 20, 30)
    const res3 = curryAdd(10)(20, 30)
    expect(res1).toBe(res)
    expect(res2).toBe(res)
    expect(res3).toBe(res)
  })

  it('参数不足', () => {
    function add2(num1: number, num2: number, num3: number, num4: number): number {
      return num1 + num2 + num3 + num4
    }
    const curryAdd = curryFunc(add2)
    expect(curryAdd(10)(20) instanceof Function).toBe(true)
  })
})

发现执行到const res3 = curryAdd(10)(20, 30)时有如下报错：

    TypeError: curryAdd(...) is not a function

      15 |     const res1 = curryAdd(10)(20)(30)
      16 |     const res2 = curryAdd(10, 20, 30)
    > 17 |     const res3 = curryAdd(10)(20, 30)
         |                              ^
      18 |     expect(res1).toBe(res)
      19 |     expect(res2).toBe(res)
      20 |     expect(res3).toBe(res)

      at Object.<anonymous> (src/practice-24/curry-function.test.ts:17:30)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

但在功能测试中，curryAdd(10)(20, 30)是正常返回结果的

/**
 * @description 函数柯里化处理
 * @param func 待柯里化处理的函数
 */
export function curryFunc(func: Function): Function {
  // 获取待柯里化处理的函数入参数量
  const funArgLength = func.length
  let args: any[] = []

  function calc(this: any, ...params: any[]) {
    args = [
      ...args,
      ...params
    ]
    if (args.length < funArgLength) {
      return calc
    } else {
      // 需要对args进行截取，使之与func函数的入参数量对应
      return func.apply(this, args.slice(0, funArgLength))
    }
  }

  return calc
}

function add(num1: number, num2: number, num3: number): number {
  return num1 + num2 + num3
}

const curryAdd = curryFunc(add)

console.log(curryAdd(10)(20, 30)) // 控制台打印60，功能正常

我的依赖库版本为：

"devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@types/jest": "^27.0.2",
    "autoprefixer": "^10.2.5",
    "babel-jest": "^27.3.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "html-webpack-plugin": "^5.3.1",
    "jest": "^27.3.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "postcss-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.30.0",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3",
    "ts-jest": "^27.0.7"
  }

麻烦双越老师协助定位一下，谢谢

Answer 1

双越 2022-04-11 15:33:47

报错提示：curryAdd(...) is not a function

那你就在单元测试的代码中打印一下 curryAdd(10) 是什么？

得根据它的报错提示一步一步调试，谁都无法通过肉眼一下看出哪里的问题。

• 提问者 进击的技术宅 #1

  定位出原因了：
  
  1. 执行curryFunc函数会形成一个闭包，导致args变量总是保存在内存中
  2. 每次执行完curryAdd函数后，args变量会缓存当次执行时的入参
  3. 单元测试报错，是因为执行curryAdd(10)(20, 30)前，已经执行过两次curryAdd函数，
      args为[10, 20, 30, 10, 20, 30]，走了else分支，返回了60，所以导致报错。
  
  改进：
         在else分支中定义一个新变量newArgs接收args.slice(0, funArgLength),作为apply函数的入参，同时重置args为空数组
  
  结果：单元测试和功能测试通过
  
  PS：嘿嘿，好不容易发现了双越老师的一个bug，今晚给自己加个鸡腿吧~~~

• 双越 回复 提问者 进击的技术宅 #2

  非常好~

• mkzlog 回复 提问者 进击的技术宅 #3

  点赞点赞