Ionic+Angular2项目使用Jasmine测试遇import导入错误

嘿，我之前维护Angular 5的Ionic项目时也碰到过一模一样的问题！核心原因是你的测试环境没正确配置TypeScript的模块解析规则，导致jasmine-ts没法处理ES模块的import语法。下面是一步步的解决方法：

1. 配置测试专用的TypeScript文件 #

首先在项目根目录创建tsconfig.spec.json，专门用于测试编译，确保包含以下关键配置：

{
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "node",
    "target": "ES5",
    "sourceMap": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["ES2017", "DOM"],
    "outDir": "./out-tsc/spec",
    "baseUrl": "./",
    "types": ["jasmine", "node"]
  },
  "files": [
    "src/test.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

这里的module: CommonJS是关键——Jasmine运行在Node环境下，需要CommonJS模块格式才能识别导入语句。

2. 配置Jasmine的运行规则 #

在项目根目录创建jasmine.json配置文件，指定测试文件路径和TypeScript相关设置：

{
  "spec_dir": "src",
  "spec_files": [
    "**/*.spec.ts"
  ],
  "helpers": [
    "../node_modules/jasmine-ts/lib/index.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": false
}

3. 修正package.json中的测试命令 #

确保test命令指向正确的spec文件路径，并且指定使用我们刚创建的测试TS配置：

"scripts": {
  "test": "jasmine-ts --config=tsconfig.spec.json \"src/**/*.spec.ts\""
}

注意路径要和你实际项目的spec文件位置对应，别写错了！

4. 确保依赖版本兼容 #

因为你用的是Angular 5，对应的TypeScript版本应该是2.4.x，别装太高版本导致不兼容。执行以下命令安装/更新依赖：

npm install --save-dev @types/jasmine@2.x jasmine jasmine-ts typescript@2.4.x

最后验证 #

完成以上配置后，可删除项目的node_modules和package-lock.json（可选，避免缓存问题），重新执行npm install，然后运行npm test试试——应该就能正常识别import语句了！

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