Angular 单元测试 - 忽略样式表

Posted

技术标签:

【中文标题】Angular 单元测试 - 忽略样式表【英文标题】:Angular unit testing - ignore stylesheets 【发布时间】:2019-07-15 06:08:27 【问题描述】:

我正在尝试为一个相当大的 非 cli Angular 应用程序加快单元测试的速度,并且有一个想法:如果我跳过样式表会怎样?运行测试的最慢步骤(相差很大)是 Webpack 编译应用程序中包含的数千个 scss 样式表。

我已更改 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)

我认为我需要在这里做的是将每个样式表加载为空字符串,或者设置 Testbed 以忽略组件元数据中对 .scss 文件的引用。

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

【问题讨论】:

【参考方案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')
                   
               ,

最后我将我的加载器与 raw-loader 一起使用:


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

【讨论】:

以上是关于Angular 单元测试 - 忽略样式表的主要内容,如果未能解决你的问题,请参考以下文章

maven编译时如何忽略单元测试

如何在订阅Angular7单元测试用例中对代码进行单元测试

Angular 4 单元测试(TestBed)非常慢

Angular - 组件中订阅功能的单元测试

Angular中的单元测试

angular2 使用主机组件进行单元测试