使用azure-devops-ui的Page组件时Jest报SyntaxError: Unexpected token 'export'

问题描述 #

在使用azure-devops-ui的Page组件时，Jest测试抛出以下错误：

D:\Enablement\steam-azdo-testconfig-utility\src\node_modules\azure-devops-ui\Page.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from ".data:application/json;charset=utf-8;base64,eyJmaWxlIjoiRDpcXEVuYWJsZW1lbnRcXHN0ZWFtLWF6ZG8tdGVzdGNvbmZpZy11dGlsaXR5XFxzcmNcXG5vZGVfbW9kdWxlc1xcYXp1cmUtZGV2b3BzLXVpXFxQYWdlLmpzIiwic291cmNlcyI6WyJEOlxcRW5hYmxlbWVudFxcc3RlYW0tYXpkby10ZXN0Y29uZmlnLXV0aWxpdHlcXHNyY1xcbm9kZV9tb2R1bGVzXFxhenVyZS1kZXZvcHMtdWlcXFBhZ2UuanMiXX0=
                                                                                             ^^^^^^
SyntaxError: Unexpected token 'export'

      2 | import * as React from "react";
      3 | import * as SDK from "azure-devops-extension-sdk";
    > 4 | import { Page } from "azure-devops-ui/Page";
        | ^

已使用ts-jest进行代码转换，相关环境和配置如下：

• Node: 18.1.0
• NPM: 8.12.2
• 核心依赖版本：

  "dependencies": {
    "azure-devops-ui": "^2.167.1",
    "react": "16.8.1",
    "react-dom": "16.8.1"
  },
  "devDependencies": {
    "jest": "^26.1.0",
    "ts-jest": "^26.1.1",
    "typescript": "^4.1.5"
  }
  

• Jest关键配置：

  "jest": {
    "transform": {
      "^.+\\.(js|ts|tsx|jsx)$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|azure-devops-ui|azure-devops-extension-sdk|react-st-modal)/)"
    ],
    "preset": "ts-jest/presets/js-with-ts",
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.test.json"
      }
    }
  }
  

• tsconfig.test.json核心编译配置：

  "compilerOptions": {
    "module": "commonJS",
    "target": "es6"
  }
  

尝试过修改transformIgnorePatterns的多种配置，但测试仍无法通过。

解决方案 #

• 修正transformIgnorePatterns正则
  原正则可能未正确匹配azure-devops-ui的子模块，修改为：

  "transformIgnorePatterns": [
    "node_modules/(?!(azure-devops-ui|azure-devops-extension-sdk|react-st-modal)/)"
  ]
  

  移除无关的react-native条目，确保正则能覆盖目标包下的所有文件。

• 调整ts-jest编译选项
  在Jest配置的globals.ts-jest中添加ES模块转换相关配置，强制将ES代码转为CommonJS：

  "globals": {
    "ts-jest": {
      "tsconfig": "tsconfig.test.json",
      "useESM": false,
      "babelConfig": {
        "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
      }
    }
  }
  

  同时安装@babel/preset-env依赖：

  npm install --save-dev @babel/preset-env
  

• 降低tsconfig编译目标
  将tsconfig.test.json中的target改为es5，确保输出代码兼容Jest运行环境：

  "compilerOptions": {
    // ...其他配置
    "target": "es5"
  }
  

• 清除Jest缓存
  执行以下命令清除缓存，避免旧转换结果干扰：

  npx jest --clearCache
  

• 重新安装依赖（可选）
  如果node_modules/azure-devops-ui文件内容异常（如错误的base64编码），删除node_modules和package-lock.json后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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