运行测试用例时遇SyntaxError: Unexpected token '<'问题求助

问题概述 #

运行测试用例时先碰到cannot import statement outside of a module错误，通过在package.json中添加以下配置解决：

"jest": {
    "transformIgnorePatterns": [
      "./node_modules/(?!(MY_LIBRARY|@stencil)/)"
    ]
  },

但解决该问题后，又出现Unexpected token '<'错误。已尝试安装jest-transform-stub、Mock SVG等方法，均未解决。当前jest.config.js配置如下：

module.exports = {
    preset: "ts-jest",
    transform: {
      "^.+\\.(ts|tsx)?$": "ts-jest",
      "^.+\\.(js|jsx)$": "babel-jest",
    },

    // 测试文件匹配规则
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",

    // 支持导入的文件扩展名
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
  };

可行解决方案 #

1. 为非代码文件添加转换器 #

Unexpected token '<'大多是因为Jest遇到HTML、SVG这类静态文件时没有对应的转换规则。可以修改jest.config.js，为这类文件配置jest-transform-stub：

• 先安装依赖：

  npm install jest-transform-stub --save-dev
  

• 更新transform配置：

  transform: {
    "^.+\\.(ts|tsx)?$": "ts-jest",
    "^.+\\.(js|jsx)$": "babel-jest",
    "^.+\\.(svg|html|css)$": "jest-transform-stub"
  },
  

2. 通过ModuleNameMapper Mock静态资源 #

如果转换器方案无效，直接Mock所有静态文件：

• 在jest.config.js中添加：

  moduleNameMapper: {
    "^.+\\.(svg|png|jpg|html|css)$": "<rootDir>/__mocks__/fileMock.js"
  }
  

• 在项目根目录创建__mocks__/fileMock.js，内容为：

  module.exports = "test-file-stub";
  

3. 检查transformIgnorePatterns与依赖包 #

之前的配置让MY_LIBRARY和@stencil跳过忽略转换，如果这些包内部包含HTML/SVG等文件，需要确保转换器能覆盖到它们。可以尝试调整transformIgnorePatterns的范围，或者确认依赖包的输出是否为Jest可处理的格式。

4. 验证Babel配置 #

如果使用babel-jest，确保Babel配置能正确处理项目语法。比如在babel.config.js中添加必要的预设：

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
};

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