Cypress version 12 component test not working due to service dependency issues

Question

I'm using Angular version 15 with Cypress version 12.

I've made a basic example component in order to test the new Cypress component testing.

But I seem to have issues as soon as I import services e.g. utilityService.

My component I'm testing:

import { Component } from '@angular/core';

import { UtilityService } from '../../services';

@Component({
  selector: 'example-view',
  templateUrl: './example.component.html',
})
export class ExampleComponent {

  constructor(
    utilityService: UtilityService,
  ) { }
}

My component html:

<h2>Example Component</h2>

My Cypress component test:

import { ExampleComponent } from './example.component'
import { UtilityService } from '../../services';

describe('Example component', () => {
  it('should mount the component', () => {
    const utilityService = new UtilityService();

    cy.mount(ExampleComponent, {
      componentProperties: {
        utilityService,
      },
    });

    cy.get('h2').should('exist');
    cy.get('h2').should('contain', 'Example Component');
  })
})

My configuration setup:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  chromeWebSecurity: false,
  screenshotsFolder: "cypress/snapshots",
  trashAssetsBeforeRuns: true,
  viewportWidth: 1400,
  viewportHeight: 1200,
  video: false,
  env: {
    local: "http://localhost:4200/",
    staging: "hidden",
    user: {
      email: "hidden",
      password: "hidden",
    },
  },
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
});

UtilityService:

import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject } from 'rxjs';

import { ErrorModel } from '../models';

@Injectable()
export class UtilityService {
  private sideMenu: BehaviorSubject<boolean | null> = new BehaviorSubject(false);
  public sideMenu$ = this.sideMenu.asObservable();

  constructor() { }

  sideMenuToggle(isVisible: boolean): void {
    this.sideMenu.next(isVisible);
  }

  sortData(dataSource, propertyToSortOn: any, event: any): Array<any> {
    return [
      ...dataSource.sort((a: any, b: any) => {
        if (a[propertyToSortOn] < b[propertyToSortOn]) {
          return event === 'ASC' ? -1 : 1;
        }
        if (a[propertyToSortOn] > b[propertyToSortOn]) {
          return event === 'DESC' ? -1 : 1;
        }
        return 0;
      }),
    ];
  }
}

Error:

Not sure why I'm getting a storageService error in the stack trace? The utilityService dependency don't seem linked.

Also, let me know please if I can mock the services because I'd hate to have to import lots of services like with unit tests.

Note: the test works fine if I remove the utilityService from both the component and component test.

Stack trace:

     at Module.StorageService (http://localhost:8080/__cypress/src/spec-0.js:92860:116)
    at 49525 (webpack://angular/./src/app/services/http/certificate.http.ts:10:62)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 21866 (http://localhost:8080/__cypress/src/spec-0.js:92870:80)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 12110 (http://localhost:8080/__cypress/src/spec-0.js:89187:67)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at 96239 (http://localhost:8080/__cypress/src/spec-0.js:89151:76)
    at Function.__webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at _ZoneDelegate.invoke (http://localhost:8080/__cypress/src/polyfills.js:5341:158)
From previous event:
    at evalScripts (http://localhost:8080/__cypress/runner/cypress_runner.js:168260:58)
    at <unknown> (http://localhost:8080/__cypress/runner/cypress_runner.js:168269:152)
From previous event:
    at runScriptsFromUrls (http://localhost:8080/__cypress/runner/cypress_runner.js:168269:136)
    at Object.runScripts (http://localhost:8080/__cypress/runner/cypress_runner.js:168283:12)
    at $Cypress.onSpecWindow (http://localhost:8080/__cypress/runner/cypress_runner.js:156917:75)
    at init (http://localhost:8080/__cypress/src/cypress-entry.js:66:11)
    at 48839 (http://localhost:8080/__cypress/src/cypress-entry.js:38:3)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at render (http://localhost:8080/__cypress/src/cypress-entry.js:84:3)
    at 42795 (http://localhost:8080/__cypress/src/cypress-entry.js:87:1)
    at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
    at __webpack_exec__ (http://localhost:8080/__cypress/src/cypress-entry.js:7783:48)
    at <unknown> (http://localhost:8080/__cypress/src/cypress-entry.js:7784:62)
    at webpackJsonpCallback (http://localhost:8080/__cypress/src/runtime.js:312:39)
    at <unknown> (http://localhost:8080/__cypress/src/cypress-entry.js:1:67)

Answer 1

This was because I was importing services using an index file.

Solution:

import { UtilityService } from '../../services/utility.service';

Instead of this:

import { UtilityService } from '../../services';

Now I'm not fully sure if its possible to use the index file approach by changing the config.

Its weird because the index file in services folder is exporting the service and works fine when the Angular app runs.