karma-typescript无法找到模块

Question

我有一个非常小的项目,我正在尝试设置单元测试.直接使用时tsc项目编译正常,但是,当我尝试执行使用karma-typescript框架的测试时,我得到以下的Typescript编译错误:

错误:

错误[compiler.karma-typescript]:src/drawing/canvas.model.ts(1,23):错误TS2307:找不到模块'utils'.

错误[compiler.karma-typescript]:src/models/grid.model.ts(1,23):错误TS2307:找不到模块'utils'.

错误[compiler.karma-typescript]:src/utils/specs/obj.utils.spec.ts(1,23):错误TS2307:找不到模块'utils'.

---

项目结构: 我有一个项目设置,其结构如下:

|-dist/
|-node_modules/
|-src/
| |
| |-drawing/
| | |
| | |-canvas.model.ts
| |    ________________________________
| |   | import { Utils } from 'utils'; |  Karma Fails (tsc is fine)
| |    --------------------------------
| |
| |-models/
| | |
| | |-grid.model.ts
| |    ________________________________
| |   | import { Utils } from 'utils'; |  Karma Fails (tsc is fine)
| |    --------------------------------
| | 
| |-utils/
| | |
| | |-index.ts
| | |  _________________________
| | | | export module Utils {}  |
| | |  -------------------------
| | |
| | |-specs/
| | | |
| | | |-obj.utils.spec.ts
| | |    ________________________________
| | |   | import { Utils } from 'utils'; |  Karma Fails (tsc is fine)
| | |    --------------------------------
| | |
|-karma.config.js
|-tsconfig.json
|-package.json

---

我很清楚,我的tsconfig.json文件与内部用于karma-typescript的编译器设置之间存在差异.这是我如何组织这两个文件.根据karma- typescript的文档,我可以在我的karma.conf文件中配置几个选项,它们会告诉karma-typescript在我的Typescript配置文件中尊重我的设置,即"paths"属性,这就是我的位置已经指定了Typescript在哪里查找我的utils模块.

KARMA.CONF.JS

// Karma configuration
// Generated on Fri Mar 31 2017 16:42:11 GMT-0700 (PDT)
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'karma-typescript'],
    // Plugins
    plugins: [
      'karma-spec-reporter',
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-jasmine-html-reporter',
      'karma-typescript'
    ],
    // list of files / patterns to load in the browser
    files: [{
      pattern: "./src/**/*.ts"
    }],
    // list of files to exclude
    exclude: ['**/*.spec.js'],

    // Karma Typescript compiler options
    karmaTypescriptConfig: {
      bundlerOptions: {
        resolve: {
          directories: ["src", "node_modules", "src/utils"]
        }
      }
    },
    compilerOptions: {
      module: 'commonjs',
      moduleResolution: 'node',
      paths: {
        'utils': ['./src/utils'], 'utils/*': ['./src/utils/*']
      }
    },
    tsconfig: './tsconfig.json',


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      "**/*.ts": ["karma-typescript"]
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'kjhtml', 'spec', "karma-typescript"],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

---

这是我的Typescript配置文件.请注意,我正在tsconfig文件"utils"的"paths"部分中注册,这有助于Typescript编译器的模块解析过程.这适用于普通的Typescript编译,但这可能是因为我的Typescript编译器实际上是尊重我的tsconfig文件中的设置.我正在使用Typescript 2.0.10.但似乎karma- typescript正在使用Typescript 2.2.2,这可能是错误的潜在来源.我将不得不针对该版本运行我的编译器,看看我是否可以生成相同的错误.

TSCONFIG.JSON

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist",
    "paths": {
      "utils/*": ["./src/utils/*"],
      "utils": ["./src/utils"]
    },
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es5", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "rootDirs": ["./dist", "."]
  },
  "exclude": ["./node_modules", "./dist", "**/*.d.ts"],
  "include": ["./src/**/*.ts"]
}

任何人都可以帮我解决这个问题吗？我很擅长使用Typescript,但对于Karma来说却很新鲜.我一直在搜索文档大约2天,现在试图让这些简单的单元测试运行,但无济于事.不是我的路径至少有结构的方式.任何帮助,将不胜感激!

---

更新: 我尝试将我的本地安装的Typescript更新为2.2.2,以匹配Karma-Typescript的版本2.2.2.同样的错误,相同的场景 - 我的本地版本编译得很好,但是Karma-Typescript版本很好.

Answer 1

在Karma配置中有一个小错误compilerOptions,tsconfig属性应该在karmaTypescriptConfig属性中.

鉴于你的项目结构例子,下面是两个最小的工作配置示例tsc和karma-typescript:

Karma.conf.js

module.exports = function(config) {
    config.set({

        frameworks: ["jasmine", "karma-typescript"],

        files: [
            { pattern: "src/**/*.ts" }
        ],

        karmaTypescriptConfig: {
            compilerOptions: {
                module: "commonjs"
            },
            tsconfig: "./tsconfig.json",
        },

        preprocessors: {
            "**/*.ts": ["karma-typescript"]
        },

        reporters: ["progress", "kjhtml", "spec", "karma-typescript"],

        browsers: ["Chrome"]
    });
};

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "./dist",
        "paths": {
            "utils/*": ["./src/utils/*"],
            "utils": ["./src/utils"]
        },
        "module": "es6",
        "moduleResolution": "node",
        "sourceMap": true,
        "target": "es5"
    }
}

我用typescript@2.2.2和测试了这个karma-typescript@3.0.0.

此外,请注意,karma-typescript只有Typescript作为开发依赖项,让你使用1.6.2及以上的任何Typescript版本:)