我正在尝试为一个相当大的非 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)
我认为我在这里需要做的是将每个样式表作为空字符串加载,或者以忽略组件元数据中对 .scss 文件的引用的方式设置测试床。
有没有办法完成这些解决方案之一,或者是否有更聪明的方法来解决这个问题?
最佳答案
我解决了!
通过创建将所有 .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')
}
},
最后我将我的 loader 与 raw-loader 一起使用:
{
test: /\.scss$/,
use: ['raw-loader', 'ignore-sass-loader'],
},
关于css - Angular 单元测试 - 忽略样式表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54805196/