How to resolve vitest errors; stylesheet imports and dynamically fetched modules

I'm trying to migrate my angular app from karma to vitest, most of the test pass but some of them are failing with one of theses errors:

"[vite] Pre-transform error: [sass] Can't find stylesheet to import."
"TypeError: Failed to fetch dynamically imported module:"
​

vite.config.ts

import {defineConfig} from 'vite';

import angular from '@analogjs/vite-plugin-angular';
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({ mode }) => ({
plugins: [angular(), tsconfigPaths()],
test: {
globals: true,
setupFiles: 'test-setup.ts',
root: './',
// environment: 'jsdom',
browser: {
provider: 'playwright',
enabled: true,
name: 'chromium',
},
coverage: {
provider: 'istanbul',
reportsDirectory: 'coverage',
reported: ['text', 'json', 'html']
}
},

}));


test-setup.ts

import '@angular/compiler';
import '@analogjs/vitest-angular/setup-zone';

import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { getTestBed } from '@angular/core/testing';

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


I've seen many times similar questions with stylesheets, but there was problem with '~' which is not my case....

basically tried everything that popup in the google, as I've seen many time the problems was with '~', but i don't use it in my case.

Continue reading...