Angular项目从Karma迁移到Vitest后测试报错求助

我正尝试将Angular项目从Karma迁移到Vitest，大部分测试已通过，但部分测试出现以下两类错误：

"[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()
);

样式导入错误的补充信息 #

我见过很多样式表相关的类似问题，但都是~符号的问题，而我并未使用该符号，且已尝试过各类搜索到的解决方案。

更新：样式表错误似乎并非测试失败的真正原因——比如我遇到了导入od-defaults的样式表错误，但该组件甚至没有对应的spec测试文件。

相关样式代码：

@import "od-defaults";

.container {
  display: flex;
  height: 100%;

  .list {
    flex: 1 1 50%;
    min-width: 500px;
    max-width: 50%;

    &:first-child {
      border-right: $border;
    }
  }
}

od-defaults.scss内容片段：

$gray: #E4E4E4;
$light-gray: #F0F0F0;
$green: #67B95C;
$red: #7a0026;
$text-gray: #707070;
$text-gray-dark: #4E4E4E;
$text-gray-light: #C7C7C7;
$text-highlight: #028FB2;
$label-color-gray: #929292;
$label-color-black: #1D1D1D;
...

动态导入模块失败的错误详情 #

测试实际失败的原因是第二类错误——动态获取模块失败，例如报错：

"TypeError: Failed to fetch dynamically imported module: http://localhost:63315/.../vehicle-of-interest-list.component.spec.ts?import&browserv=1736359447921"

相关测试文件（vehicle-of-interest-list.component.spec.ts） #

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {VehicleOfInterestListComponent} from './vehicle-of-interest-list.component';
import {SIGNAL, signalSetFn} from '@angular/core/primitives/signals';

describe('VehicleOfInterestListComponent', () => {
  let component: VehicleOfInterestListComponent;
  let fixture: ComponentFixture<VehicleOfInterestListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [VehicleOfInterestListComponent]
    })
    .compileComponents();
    
    fixture = TestBed.createComponent(VehicleOfInterestListComponent);
    component = fixture.componentInstance;

    signalSetFn(component.vehiclesSig[SIGNAL], []);

    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

对应组件文件（vehicle-of-interest-list.component.ts） #

import {Component, input, signal} from '@angular/core';
import {UpgradeVehicle} from 'lib/command-center/modules/lead-profile/models/upgrade/upgrade-vehicle';
import {
  UpgradeVehicleListItemComponent
} from 'lib/command-center/modules/lead-profile-v2/pages/deal-page/upgrade-vehicle-list-item/upgrade-vehicle-list-item.component';
import {DialogComponent} from 'lib/shared';

@Component({
  selector: 'app-vehicle-of-interest-list',
  standalone: true,
  imports: [
    UpgradeVehicleListItemComponent,
    DialogComponent
  ],
  templateUrl: './vehicle-of-interest-list.component.html',
  styleUrl: './vehicle-of-interest-list.component.scss'
})
export class VehicleOfInterestListComponent {
  public vehiclesSig = input.required<UpgradeVehicle[]>({ alias: 'vehicles' });

  protected isVisibleSig = signal(false);

  public showPopup() {
    this.isVisibleSig.set(true);
  }

  public hidePopup() {
    this.isVisibleSig.set(false);
  }
}

内容的提问来源于stack exchange，提问作者Artiom Martiniuc