Cypress tries to access cypress.config.js instead of .ts and tries to locate a file from a mixed up path

Question

Within an NX mono repo I have an Angular app on which I run component tests via Cypress. I sporadically keep getting the following error in the cypress app, when a test reruns after code changes in the testing code:

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

When searching the repo for a cypress.config.js file I do only find cypress.config.ts files since the whole NX repo only uses TypeScript.

Anyways, this is the content of my cypress.config.ts:

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';

export default defineConfig(nxComponentTestingPreset(__filename));

I've tried to solve the problem by changing the config like so:

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';

export default defineConfig({
  component: {
    ... nxComponentTestingPreset(__filename),
    devServer: {
      ... nxComponentTestingPreset(__filename).devServer,
      options: {
        projectConfig: {
          ... nxComponentTestingPreset(__filename).devServer.options.projectConfig,
          root: 'apps/angular-app'
        }
      }
    }
  },
});

But this did not solve the problem.

Also, the error that stack trace reports, is delivering a strange behaviour by mixing up file paths. It actually doubles the path to the component-index.html file:

Error: ENOENT:

no such file or directory, utime '/Users/USER/projects/frontends/apps/angular-app/Users/USER/projects/frontends/apps/angular-app/cypress/support/component-index.html' at utimesSync (node:fs:2047:3)

Could the reason be, that I am using a newer version of Angular? When starting the Cypress testing app through USER@machine angular-app % npx cypress open I receive the following warning:

Warning: Component Testing Mismatched Dependencies

We detected that you have versions of dependencies that are not officially supported:

@angular/platform-browser-dynamic. Expected ^=13.0.0 || ^=14.0.0 || ^=15.0.0, found 16.0.1. If you're experiencing problems, downgrade dependencies and restart Cypress.

Blockquote

Answer 1

According to the source, the syntax should be

export default defineConfig({
  component: {
    ...nxComponentTestingPreset(__filename)
    // add your own config here
  }
})

so in the initial attempt you are missing the component: {...} wrapper.

I think the doubled-path is due to unwinding already resolved paths inside the config, you can check the paths given by console logging nxComponentTestingPreset(__filename).

All paths given to component: {...} should be relative, not absolute.