Angular 单元测试 - 忽略样式表

Question

我正在尝试加快相当大的 non-cli Angular 应用程序的单元测试，并且有一个想法：如果我跳过样式 [= =27=]s？运行测试中最慢的步骤（大幅度）是 Webpack 编译应用程序中包含的数千个 scss 样式 sheet。

我已经更改了 webpack 设置以加载这些文件的空模块：

 { test: /\.css$/, use: 'null-loader' },
 { test: /\.scss$/, use: 'null-loader' },

当然 Angular 测试台的元数据解析器现在抱怨模块是空的..

 Error: Expected 'styles' to be an array of strings.
      at assertArrayOfStrings (webpack:///node_modules/@angular/compiler/esm5/compiler.js:2522 <- config/spec-bundle.js:109446:19)
      at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack:///node_modules/@angular/compiler/esm5/compiler.js:14965 <- config/spec-bundle.js:121889:13)

我想我在这里需要做的是将每个样式 sheet 加载为空字符串，或者以忽略组件元数据中对 .scss 文件的引用的方式设置测试台.

有没有办法完成这些解决方案之一，或者是否有更聪明的方法来解决这个问题？

Answer 1

我解决了！

通过创建一个将所有 .scss 文件加载为空字符串的自定义加载器，我可以大大减少编译单元测试所需的时间。

忽略-sass-loader.js:

const sass = require("node-sass");
const async = require("neo-async"); const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);

module.exports = function ignoreSassLoader(content) { 
    const callback = this.async(); 

    asyncSassJobQueue.push({}, () => { 
        callback(null, ' '.toString(), null); 
    }); 
};

然后通过向 webpack 配置添加别名来解决此问题：

module.exports = function () {
    return {
               resolveLoader: {
                   alias: {
                       'ignore-sass-loader': resolve(__dirname, '../config/loaders/ignore-sass-loader')
                   }
               },

最后我将我的加载器与原始加载器一起使用：

{
     test: /\.scss$/,
     use: ['raw-loader', 'ignore-sass-loader'],
},

Angular 单元测试 - 忽略样式表

Angular unit testing - ignore stylesheets

css

testbed

karma-runner

webpack

angular