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

Question

我正在使用的项目设置 Angular2 +打字稿 用于捆绑的Webpack Karma + Jamine

问题陈述

我有一个scss文件，我在顶部有一个导入 这是@import“variables.global”;

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

我在许多scss文件上面都有导入，因为我的许多测试用例都失败了。

我的问题是为什么Karma试图将css @import加载为普通的javascript模块。

正在拨打电话 here

上面似乎对我不对，因为

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

fabric.charWidthsCache[this.value] = {};
canvas.getActiveObject()._initDimensions();
canvas.getActiveObject().setCoords();

最近更新

如果我改变@import“_variables.global.scss”; 至 @import“base / app / _variables.global.css”; 我的所有测试用例都符合条件。

但我无法做到这一点，因为我正在使用Webpack进行捆绑，它会产生更多错误。

Answer 1

经过巨大的努力，我确定了解决方案

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

这是我的bundlerOptions。仔细查看我所拥有的定制变压器。 判断scss文件的方法可能不是最好的，可以很容易地被正则表达式取代。

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