TypeScript带类型参数函数单元测试报错的排查与解决

我有如下TypeScript函数：

export const AuthHandler = {
    isTokenNeedRefresh: (seconds: number) => {
        const accessToken = localStorage.getItem(WheelGlobal.ACCESS_TOKEN_NAME);
        if(!accessToken){
            return false;
        }
        const claim = JSON.parse(atob(accessToken.split('.')[1]));
        const exp = claim.exp;
        const now = Math.floor(Date.now() / 1000);
        // seconds was the token prereload time gap
        const isExpired = exp < now + seconds;
        if (isExpired) {
            return true;
        }else{
            return false;
        }
    }
}

我为该函数编写了如下Mocha+Chai单元测试代码：

import 'mocha'
import { expect } from 'chai'
import AuthHandler from "../../../src/auth/extension/AuthHandler";

describe('Auth Test', function () {
    it('Parse jwt token', async function () {
        const result = AuthHandler.isTokenNeedRefresh(16000);
        expect(typeof result).to.be('boolean');
    })
})

运行测试时出现语法错误，报错信息如下：

FAIL  test/auth/extension/AuthHandler.test.ts
  ● Test suite failed to run

    SyntaxError: /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/src/auth/extension/AuthHandler.ts: Unexpected token, expected "," (8:32)

       6 |
       7 | export const AuthHandler = {
    >  8 |     isTokenNeedRefresh: (seconds: number) => {
         |                                 ^
       9 |         const accessToken = localStorage.getItem(WheelGlobal.ACCESS_TOKEN_NAME);
      10 |         if(!accessToken){
      11 |             return false;

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:150:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:145:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/error.js:89:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:174:16)
      at Parser.expect (node_modules/@babel/parser/src/parser/util.js:150:28)
      at Parser.parseParenAndDistinguishExpression (node_modules/@babel/parser/src/parser/expression.js:1702:14)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1122:21)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:682:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:662:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:633:23)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.414 s
Ran all test suites within paths "/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/test/auth/extension/AuthHandler.test.ts".
Waiting for the debugger to disconnect...

请问我遗漏了什么？该如何修复此问题？我是在VS Code中运行该测试的。

报错核心是Babel解析TS代码时无法识别参数的类型注解(seconds: number)，原因是测试环境未正确配置TypeScript编译支持：Mocha默认只能解析JavaScript代码，直接运行TS文件时，会把TS特有的语法（比如类型注解）当成非法JS语法，从而抛出语法错误。

方案1：使用ts-mocha直接运行TS测试 #

ts-mocha是整合了TypeScript编译的Mocha工具，无需额外配置即可运行TS测试：

• 安装依赖：

npm install ts-mocha typescript @types/mocha @types/chai --save-dev

• 修改package.json中的测试命令：

"scripts": {
  "test": "ts-mocha test/**/*.test.ts"
}

• 运行测试：

npm run test

方案2：配置Babel转译TypeScript #

如果要继续使用原生Mocha，需配置Babel将TS代码转译为JS后再运行：

• 安装依赖：

npm install @babel/core @babel/preset-env @babel/preset-typescript @babel/register mocha chai --save-dev

• 在项目根目录创建.babelrc配置文件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

• 修改package.json中的测试命令：

"scripts": {
  "test": "mocha --require @babel/register test/**/*.test.ts"
}

• 运行测试：

npm run test

额外优化点 #

• 测试代码中的async可以移除，因为isTokenNeedRefresh是同步函数，不需要异步测试逻辑。
• 确保项目根目录存在tsconfig.json，配置符合项目的TypeScript编译规则（比如target设为ES6及以上）。

内容的提问来源于stack exchange，提问作者spark