Can't use cypress alongside with Jest with multiple tsconfig.json files.

[StreetCube]

Main issue

Mainly I want to apologize for the very long post but I wanted to include all of the information availaible for me so maybe you can help me better.

I researched every source every stackoverflow page I could find, and maybe I'm at fault here but I can't seem to solve it after 2 days so I'm a bit desperate, I'm hoping you can help me.

We've made a decision that we're going to use Jest alongside with Cypress with angular. Cypress for e2e and UI testing, Jest for unit tests. As I tried to setup cypress's component testing I found that this messes up the typing of the jest .spec.ts files. As advised I excluded the cypress files from my main tsconfig.json (Files are going to be included at the end of this discussion).

This solved the problem for jest the errors went away, after that I created another tsconfig.json in the cypress folder as advised (I've tried many variations what to and what not to include see down where I included my tsconfig files).

This solved the typing issue in my IDE it seemed like everything is fine, BUT when I start cypress now it bombards me with warnings like:

WARNING in C:/WORK/angular-app/src/app/shared/components/language-selector/language-selector.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

for ALL of my typescript files, also it creates errors for all my tests and component.ts if I want to start them:

ERROR in ./cypress/support/component.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\WORK\angular-app\cypress\support\component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at C:\WORK\angular-app\node_modules\@ngtools\webpack\src\ivy\loader.js:75:26

ERROR in ./cypress/test.cy.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\WORK\angular-app\cypress\test.cy.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at C:\WORK\angular-app\node_modules\@ngtools\webpack\src\ivy\loader.js:75:26

They are already included and were included in many ways. I've tried to directly tell in the files option as well what to use, but that also didn't work. Based on these it seems like it's not using its specified tsconfig file? I have no clue and I haven't seen anything in the docs that explains this, and I haven't seen anyone complaining about this either, so I feel like I'm missing something here (obviously).

I've also tried to mess with the cypress.config.ts to tell a specific tsconfig file it should use in buildOptions. However this was some very specific case I found in some forums not entirely related to my issue so I'm fairly certain this is not going to be the solution.

I start to feel like this is not library specific, and maybe I'm just misunderstanding something regarding the tsconfig files and how do they work, but anyways I hope you can help me out a bit.

FILES

main tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022"
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictStandalone": true
  },
  "exclude": ["node_modules", "cypress", "cypress.config.ts"]
}

Note that this file is extended by two different tsconfigs already: tsconfig.app.json and tsconfig.spec.json here are they

app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"],
    "resolveJsonModule": true
  },
  "files": ["src/setup.jest.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

And here's my new tsconfig I've tried to use, this had many variations, included many things so this is not the only thing I've tried. This is currently copied from the main cypress documentation but I try to order some stuff I kinda remember trying:

• Including only .cy.ts files
• Adding specific files directly
• Not extending the main tsconfig.json
• Tried adding node_modules in (I was getting desperate)
• Tried moving my test into a separate folder in the cypress folder
• Tried messsing with relative, absolute paths
• Added the baseurl
• Removed baseurl
• Getting into the cypress folder opening it that way

Many other things were tried but I can't even remember them cause they didn't work.
cypress tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"],
    "baseUrl": "./"
  },
  "include": ["**/*.ts", "../cypress.d.ts"],
  "exclude": []
}

cypress.config.ts

import { defineConfig } from 'cypress';

export default defineConfig({
    component: {
        devServer: {
            framework: 'angular',
            bundler: 'webpack',
        },
        specPattern: '**/*.cy.ts',
    },
});