Cypress 组件测试未将 NX 工作区中的 customWebpackConfig 与我的 Angular 应用程序一起使用

Question

我正在尝试使用 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 配置中吗？

提前致谢

Answer 1

这有效。 将其添加到您的project.json目标选项属性中。：

    "component-test": {
      "executor": "@nx/cypress:cypress",
      "options": {
        "customWebpackConfig": {
          "path": "apps/test-app/cypress/webpack.config.js"
        }
      }
     }