Angular, Karma, tsify, woes

Question

我正在尝试设置测试，我们正在使用 Angular 1.5、TSify 和 Karma。我非常非常接近，但我运行遇到了一个我不太正确的问题：

我正在按照此处描述的设置进行操作：https://github.com/cmlenz/tsify-test（此示例不包括 angular）

我从 angular-mocks 得到一个错误："Cannot set property 'mock' of undefined"

这必须是时间问题或范围问题——angular-mocks 加载得太快，或者 browserify 正在包装 angular 变量的范围，并模拟看不到它。不知道。

以下是我的 karma.conf.js 文件的相关部分：

    frameworks: ['browserify', 'jasmine'],

    files: [
        'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
        './node_modules/angular-mocks/angular-mocks.js',
        './modules/**/*.spec.ts'
    ],

    exclude: [],

    preprocessors: {
        '**/*.ts': 'browserify'
    },

    browserify: {
        debug: true,
        plugin: [
            ['tsify']
        ]
    },

这一定与我加载模拟的方式有关——它没有被我的 angular 应用程序使用，只是用于测试，所以这一定与它有关。

有什么提示吗？

Answer 1

angular-mocks 需要在 angular 之后加载，并且使用您当前的 Karma 配置，这不会发生 - angular 在 [=15] 之一中需要之前不会加载=] 个文件，您的 .spec.ts 个文件依赖于这些文件。

一个解决方案是添加一个同时需要 angular 和 angular-mocks 的附加文件，并确保该文件在 Karma 的 files 配置中位于 .spec.ts 文件之前。

例如，可以创建名为 require-angular-mocks.js 的文件：

require('angular');
require('angular-mocks');

并且可以添加到 Karma 配置中（替换 node_modules 下的 angular-mocks）：

files: [
    'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
    './require-angular-mocks.js',
    './modules/**/*.spec.ts'
],

preprocessors: {
    '**/*.js': 'browserify',
    '**/*.ts': 'browserify'
},

这应该确保 angular 和 angular-mocks 以正确的顺序加载并且在您的规格之前加载。请注意，如果它是一个 .js 文件，您将需要在 Karma 的 preprocessors 配置中添加另一个条目。

Angular, Karma, tsify, woes

Angular, Karma, tsify, woes

angularjs

karma-runner

browserify

tsify