vitest-angular: Cannot read properties of undefined (reading 'addSnapshotSerializer')

[malua]

Please provide the environment you discovered this bug in.

I cannot reproduce the error in a clean repo. So it's got to have something to do with my config. I would be really grateful if you could just point me in the right direction. And sorry for the "bug ticket", because it's most likely not a bug with vitest-angular.

Thank you!

Which area/package is the issue in?

vitest-angular

Description

I am trying to setup vitest with Angular, but unfortunately I could not fix the latest error myself.
When running nx run app-factory:test, I receive there error pasted below.

This is the test I am running:

import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { beforeEach, describe, expect, it } from 'vitest';

import { AppFactoryComponent } from './factory.component';

describe('FactoryComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [provideRouter([])],
      imports: [],
      declarations: [AppFactoryComponent]
    }).compileComponents();
  });

  it('should create the factory component', () => {
    const fixture = TestBed.createComponent(AppFactoryComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

this is my vite.config.mts

/// <reference types="vitest" />
import angular from "@analogjs/vite-plugin-angular";
import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [angular(), nxViteTsPaths()],
    test: {
      environment: "jsdom",
      setupFiles: ["src/test-setup.ts"],
      include: ["**/*.spec.ts"],
      reporters: ["default"],
      server: {
        deps: {
          inline: ["@ionic/angular"],
        },
      },
      coverage: {
        provider: "v8",
        reporter: ["text", "json", "html"],
      },
    },
    define: {
      "import.meta.vitest": mode !== "production",
    },
  };
});

And my test-steup.ts

import '@analogjs/vitest-angular/setup-zone';
import '@angular/compiler';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import '@testing-library/jest-dom/vitest';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

Please provide the exception or error you saw

FAIL  src/lib/factory/factory.component.spec.ts [ src/lib/factory/factory.component.spec.ts ]
TypeError: Cannot read properties of undefined (reading 'addSnapshotSerializer')
 ❯ ../../node_modules/.pnpm/@[email protected]_njiq5elknw7zai4ypt3y7gwdqe/packages/vitest-angular/setup-snapshots.ts:140:27
 ❯ ../../node_modules/.pnpm/@[email protected]_njiq5elknw7zai4ypt3y7gwdqe/packages/vitest-angular/setup-snapshots.ts:138:12
 ❯ ../../node_modules/.pnpm/@[email protected]_njiq5elknw7zai4ypt3y7gwdqe/packages/vitest-angular/setup-zone.ts:6:1

[brandonroberts]

Try these:

• Adding globals: true to the test object in the vite.config.mts

Removing these lines from your test

import { beforeEach, describe, expect, it } from 'vitest';

Remove this line to see if you get a different error

import '@testing-library/jest-dom/vitest';

[malua]

It was the globals, I wanted to import them explicitly, but that does not seem to work.

Actually just adding globals: true to vite.config.mjs is enough, I can leave the imports as is.

Importing '@testing-library/jest-dom/vitest'; does not affect it.

Thanks so much!