业力打字稿找不到模块 [英] karma-typescript cannot find module

问题描述

我有一个非常小的项目，我正在尝试为其建立单元测试.直接使用tsc 时项目可以正常编译，但是，尝试执行使用karma-typescript框架的测试时遇到以下Typescript编译错误:

错误:

错误[compiler.karma-typescript]:src/drawing/canvas.model.ts(1,23): 错误TS2307:找不到模块实用程序".

错误[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.conf文件中进行配置，该文件将告诉karma-typescript遵守我在Typescript配置文件中的设置，即"paths"属性，这是我为Typescript指定的要在哪里寻找我的utils模块的地方. /p>

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文件的"paths"部分中注册"utils"，这有助于Typescript编译器的

 {
  "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版本会失败.

解决方案

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作为dev依赖项，使您可以使用1.6.2及更高版本的任何Typescript版本:)

I have a very small project that I am trying to set up unit tests for. The project compiles fine when using tsc directly, however, I am getting the following Typescript compilation errors when attempting to execute tests which use the karma-typescript framework:

ERRORS:

ERROR [compiler.karma-typescript]: src/drawing/canvas.model.ts(1,23): error TS2307: Cannot find module 'utils'.

ERROR [compiler.karma-typescript]: src/models/grid.model.ts(1,23): error TS2307: Cannot find module 'utils'.

ERROR [compiler.karma-typescript]: src/utils/specs/obj.utils.spec.ts(1,23): error TS2307: Cannot find module 'utils'.

---

PROJECT STRUCTURE: I've got a project set up that is structured as such:

|-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

---

It's clear to me that there is a discrepancy between my tsconfig.json file and the compiler settings used internally for karma-typescript. Here is how I have both of those files structured. According to the documentation for karma-typescript, there should be a couple of options that I can configure in my karma.conf file that would tell karma-typescript to respect my settings in my Typescript config file, namely the "paths" property, which is where I have specified to Typescript where to look for my utils module.

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
  })
}

---

Here is my Typescript config file. Note that I am registering the "utils" in the "paths" portion of the tsconfig file, which assists in the Typescript compiler's module resolution process. This works fine with normal Typescript compilation, but that is probably because my Typescript compiler is actually respecting the settings in my tsconfig file. I am using Typescript 2.0.10. But it appears that karma-typescript is using Typescript 2.2.2, which could be the potential source of the error. I'll have to run my compiler against that version to see if I can generate the same error.

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"]
}

Can anyone help me out with this? I'm decent with Typescript but pretty new to Karma. I've been scouring documentation for about 2 days now trying to get these simple unit tests running, but to no avail. Not with the way I've got my paths structured at least. Any help would be appreciated!

---

UPDATE: I tried updating my local installation of Typescript to 2.2.2, to match the Karma-Typescript's version which is also 2.2.2. Same error, same scenario - my local version compiles fine, but the Karma-Typescript version balks.

解决方案

There's a tiny error in the Karma config, the compilerOptions and tsconfig properties should be inside the karmaTypescriptConfig property.

Given your project structure example, here's a minimal working configuration example for both tsc and 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"
    }
}

I tested this using typescript@2.2.2 and karma-typescript@3.0.0.

Also, please note that karma-typescript only has Typescript as a dev dependency, letting you use any Typescript version from 1.6.2 and up :)

这篇关于业力打字稿找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！