How to use `@jscutlery/cypress-angular` with Cucumber? about devkit HOT 5 CLOSED

Webpack extension is also going to be useful for code coverage. The original way looks like this:
https://github.com/bahmutov/cypress-angular-unit-test#code-coverage

from devkit.

Actually, there's no way to extend the webpack configuration as it's generated from Angular CLI internals, but that's a feature we can think about.

from devkit.

Sadly I ran into various issues while trying to combine these together:

• Angular 12 project generated with @nrwl/nx (i.e. heavily TypeScript based)
• Cypress component testing (@jscutlery/cypress-angular)
  • With Cucumber feature support (cypress-cucumber-preprocessor)
  • With code coverage instrumentation (@cypress/code-coverage, ngx-build-plus)
    (Even if we ignore coverage for now, ngx-build-plus is still the idea to load .feature files.)

The issues I experienced:

• import '@cypress/code-coverage/support'; fails with ReferenceError: Cypress is not defined
• feature files don't compile for the following error:

Error: Dev-server compilation failed. We can not run tests if dev-server can not compile and emit assets, please make sure that all syntax errors resolved before running cypress. 

 [object Object]
    at EventEmitter.<anonymous> (/home/rkrisztian/.cache/Cypress/7.4.0/Cypress/resources/app/packages/server/lib/modes/run-ct.js:8:7)
    at EventEmitter.emit (events.js:327:22)
    at EventEmitter.<anonymous> (/home/rkrisztian/.cache/Cypress/7.4.0/Cypress/resources/app/packages/server/lib/plugins/dev-server.js:15:17)
    at EventEmitter.emit (events.js:315:20)
    at ChildProcess.<anonymous> (/home/rkrisztian/.cache/Cypress/7.4.0/Cypress/resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (events.js:315:20)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

After some debugging, the error is the following:

{
  "moduleIdentifier": "/home/rkrisztian/my-project/apps/my-app/src/example.feature",
  "moduleName": "./src/example.feature",
  "loc": "1:13",
  "message": "Module parse failed: Unexpected token (1:13)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n> Feature: App Main Page..." // (Rest omitted!)
 // ...
}

But I did include the rules into the webpack extension... :( And I also double checked that my webpack.extra.js is loaded and syntactically valid...

from devkit.

badeball/cypress-cucumber-preprocessor#443 might be related to my problems.

from devkit.

Hi, now we can pass to the dev server a custom Webpack config that will be merged with the Angular CLI. This feature will be published soon.

from devkit.