Cypress Component Testing does not use the customWebpackConfig in NX Workspace with my angular...

I am trying to set up cypress component testing in my NX workspace with an angular application.

It does work so far, the only issue I have right now, is that it does not use my custom-webpack configuration, where I am adding a yaml loader to the angular webpack config.

I already upgraded my angular.json to the newer standard, where it creates project.json files within the apps, but nothing worked so far.

Here are my current configurations:

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

}
});


The behaviour I see is that the custom-webpack config is just ignored. If I start the angular-application with nx serve the custom configuration is used and it works fine. But if I start the component-test build it doesnt use the config, and my yaml-files are not loaded.

I debugged into the cypress.config.ts and the result of defineConfig(...) has an object which looks like this:

devServer.options.projectConfig.buildOptions.customWebpackConfig = { path: "../../webpack.custom.js" }


Still, the custom config is not used.

Is anybody having the same issue, with custom webpack configurations and component testing in cypress and angular?

Is there another method I could add my yaml-loader to the webpack config?

Thanks in advance

Continue reading...