angularcypress

Cypress for Angular library project


I have an Angular library project where I have a lot of components that I use in a handful of Angular applications.

Now I want to start testing these components using Cypress component testing. Setting up Cypress with an Angular application is super easy, but trying to do it for a library project is definitely not.

I don't really have any code to show as all my efforts are leading to the same error which is:

Error: Could not resolve "@angular-devkit/build-angular/src/webpack/configs/common.js". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?
    at C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:106:19
    at Array.map ()
    at getAngularCliModules (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:100:151)
    at async getAngularCliWebpackConfig (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:159:101)
    at async angularHandler (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:205:27)
    at async getPreset (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:94:20)
    at async Function.devServer.create (C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:111:61)
    at async C:\Users\Me\AppData\Local\Cypress\Cache\13.11.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:26:24

I've tried setting Cypress up both using the @cypress/schematic and by using npm install cypress --save-dev, to no avail.

I stumbled upon this github issue while trying to find information on how to accomplish what I want. Which talks about a library project needing an application set up in order to make it work but I have no clue how to do that and there are no examples provided either.

If anyone have succeeded in setting this up I would love some guidance!

I currently use Angular version 18 and Cypress version 13.


Solution

  • First of all, seems you're using Cypresss 13.11.0 whilst latest is 13.12.0 at moment of writing this. This is relevant as 13.12.0 introduces Component Testing support for Angular v18

    About setting it up, I've managed to setup Cypress component testing for Angular v18 by adding a dummy application to the workspace (ng g app dummy). This is because Cypress reads Angular application config to build the component and if there's no app, doesn't know which config to use. This is mentioned in the GitHub issue you pointed out. This seems the easiest & low maintenance cost for now.

    Checkout more details in this repository:

    https://github.com/davidlj95/angular-lib-cypress-component-testing

    Didn't manage to reproduce your specific error though. But hope that those 2 things solve your issue :)