Cypress testing (E2E and component) conflicts with Jasmine

[joshdunk98]

I am currently trying to set up Cypress component testing in my Angular application. I already have Cypress E2E testing set up as well as Jasmine unit tests. Before setting up the component tests, my tsconfig.json file excluded files related to Cypress in order to get past the issue of global type conflicts between Cypress and Jasmine. However, this configuration now prevents me from using "cy.anything" in my component tests. Wondering if anyone else has configured an Angular application to work with Cypress E2E and component tests as well as Jasmine unit tests.

[B34v0n]

Hi,
I had the same issue some time ago. I solved it with another tsconfig for cypress.
In the "main" tsconfig.json I added these two lines:

    "include": ["src", "cypress"],
    "exclude": ["cypress"]

All my cypress-Tests are in the cypress-folder.

And then I created a new tsconfig.json in the cypress folder where I added

    "extends": "../tsconfig.json",
    "include": ["./support/*", "**/*.ts"],
    "exclude": []

and other project specific settings.

Explenation for the exclude: ts needs to know about the cypress-folder. Therefore you need to add it to the root tsconfig. But you don't want it in the tsconfig.app.json and tsconfig.spec.json. So you exclude it again. And in the tsconfig for cypress you override the exclude with an empty Array, so that the cypress folder is included again.

I figured, that for e2e-Tests that works fine and the tsconfig.json in the cypress-folder is used. But for component-tests it does not.
You can add options for the devServer in the cypress.config.ts and add the tsconfig file there:

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: 'src',
          buildOptions: {
            tsConfig: 'cypress/tsconfig.json',
          },
        },
      },
    },
    specPattern: '**/*.cy.ts',
  },
});

for more Info to that, look at https://docs.cypress.io/guides/component-testing/angular/overview#Options-API

I hope, that helps.