Karma单元测试设置试图加载不存在的css

Question

我有一个项目设置，我使用Angular2 +打字稿Webpack来捆绑Karma + Jamine

问题陈述

我有一个scss文件，其中我有一个在顶部的导入，即@import "variables.global"；

当Karma服务器正在执行我的测试用例时，它试图加载它找不到的文件，并抛出404错误

我对许多scss文件进行了上述导入，由于同样的原因，我的许多测试用例都失败了。

我的问题是，为什么Karma试图将css @import作为正常的javascript模块加载。

它正在打一个像http://localhost:9876/variables.global一样的电话

以上对我来说是错误的，因为

这是我的业力配置，如果需要的话

module.exports = function (config) {
    config.set({
        basePath: "",
        frameworks: [
            'jasmine',
            'karma-typescript'
        ],
        reporters: [
            "progress",
            "karma-typescript",
            "html"
        ],
        preprocessors: {
            '**/*.ts': [
                'karma-typescript'
            ]
            ,'app/*.*scss': ['scss']
            ,'app/**/*.*scss': ['scss']
        },
        files: [
            {
                pattern: 'test/base.ts'
            },
            {
                pattern: 'app/**/*.ts'
            },
            {
                pattern: 'test/*.spec.ts'
            },
            {
                pattern: "./app/i18n/*.json",
                watched: true,
                served: true,
                included: false
            },
            { pattern: 'app/*.*scss', watched: true,  included: true, served: true },        
            { pattern: 'app/main.ts', watched: false,  included: false, served: false },        
        ],
        karmaTypescriptConfig: {
            exclude: ["broken"],
            tsconfig: './tsconfig.json',
            coverageOptions: {
                instrumentation: true                
            },
            bundlerOptions: {
                entrypoints: /base\.ts|\.spec\.ts$/,
                transforms: [
                    require('karma-typescript-es6-transform')({
                        presets: ['es2015', 'stage-0'],
                        extensions: ['.ts', '.js'],
                        plugins: [
                            ["transform-runtime", {
                                regenerator: true,
                                polyfill: true
                            }]
                        ]
                    })
                ]
            }
        },
        logLevel: config.LOG_INFO,
        browsers: [
            'Chrome'
        ]
    });
};

最近更新

如果我将@import "_variables.global.scss"；改为@import“base/app/_variables.global.css”，那么我的所有测试用例都符合条件。

但是我不能那样做，因为我用Webpack来捆绑，这会带来更多的错误。

Answer 1

最后，经过巨大的努力，我终于找到了解决方案。

我已经编写了脚本来更新内存中的路径。

这是我的bundlerOptions。请仔细看我正在使用的自定义变压器。索引scss文件的方法可能不是最好的，可以很容易地用regex替换。

            bundlerOptions: {
            entrypoints: /base\.ts|\.spec\.ts$/,
            resolve: {
                extensions: [".js", ".json"],
                directories: ["node_modules"]
            },
            transforms: [
                require('karma-typescript-es6-transform')({
                    presets: ['es2015', 'stage-0'],
                    extensions: ['.ts', '.js'],
                    plugins: [
                        ["transform-runtime", {
                            regenerator: true,
                            polyfill: true
                        }]
                    ]
                }),
                /**
                 * Custom transformer to resolved the issue related
                 * to importing the css from server.
                 */
                function(context, callback) {
                    if(context.module.indexOf('.scss') !== -1) {
                        context.source = context.source.replace(
                            '@import "variables.global";',
                            '@import "/base/app/_variables.global.css"'
                        );
                        return callback(undefined, true);
                    }
                    return callback(undefined, false);
                }
            ]
        }