我正在尝试使用 Angular 应用程序在我的 NX 工作区中设置 cypress 组件测试。
到目前为止它确实有效,我现在唯一的问题是它不使用我的自定义 webpack 配置,我在其中将 yaml 加载器添加到 Angular webpack 配置中。
我已经将 angular.json 升级到较新的标准,它在应用程序中创建了 project.json 文件,但到目前为止没有任何效果。
这是我当前的配置:
webpack.custom.js
module.exports = (config) => {
config.module.rules.push({
test: /\.yaml$/,
use: [
{
loader: "json-loader"
},
{
loader: "yaml-loader"
}
]
});
return config;
};
project.json
{
"projectType": "application",
"generators": {
"@schematics/angular:component": {
"style": "scss"
}
},
"sourceRoot": "apps/test-appliction/src",
"prefix": "app",
"targets": {
"build": {
"executor": "@nrwl/angular:webpack-browser",
"options": {
"optimization": false,
"sourceMap": true,
"customWebpackConfig": {
"path": "../../webpack.custom.js"
},
"outputPath": "dist/apps/test-appliction",
"index": "apps/test-appliction/src/index.html",
"main": "apps/test-appliction/src/client",
"polyfills": "apps/test-appliction/src/polyfills.ts",
"tsConfig": "apps/test-appliction/tsconfig.browser.json",
"aot": true,
}
},
"component-test": {
"executor": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/tes-application/cypress.config.ts",
"testingType": "component",
"skipServe": true,
"devServerTarget": "test-application:build"
}
}
}
}
cypress.config.ts
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';
export default defineConfig({
e2e: { baseUrl: 'http://localhost:4000' },
component: {
...nxComponentTestingPreset(__filename),
// extra options here
viewportWidth: 1024,
viewportHeight: 768
}
});
我看到的行为是 custom-webpack 配置被忽略。如果我使用
nx serve
启动角度应用程序,则会使用自定义配置并且工作正常。
但是,如果我启动组件测试构建,它不会使用配置,并且我的 yaml 文件不会加载。
我调试到 cypress.config.ts 中,
defineConfig(...)
的结果有一个如下所示的对象:
devServer.options.projectConfig.buildOptions.customWebpackConfig = { path: "../../webpack.custom.js" }
仍然没有使用自定义配置。
有人在 cypress 和 Angular 中使用自定义 webpack 配置和组件测试时遇到同样的问题吗?
还有另一种方法可以将我的 yaml-loader 添加到 webpack 配置中吗?
提前致谢
这有效。 将其添加到您的project.json目标选项属性中。:
"component-test": {
"executor": "@nx/cypress:cypress",
"options": {
"customWebpackConfig": {
"path": "apps/test-app/cypress/webpack.config.js"
}
}
}