Angular 测试失败

Question

我正在尝试运行 Angular 在创建组件时进行的基本角度测试，但它们不断失败，而且我找不到原因或如何修复它。

这些是我正在尝试运行的测试：

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


  it(`should have the 'FlinkRegi' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('FlinkRegi');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, FlinkRegi');
  });

我的完整 App.component.spec.ts：

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterOutlet, RouterLink } from '@angular/router';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent,          // Import the standalone component directly
        MatSidenavModule,
        MatListModule,
        RouterOutlet,
        RouterLink
      ],
      providers: [
        provideAnimations(),
        provideRouter([]),    // Provide router with empty routes if not required
      ]
    }).compileComponents();
  });

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


  it(`should have the 'FlinkRegi' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('FlinkRegi');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, FlinkRegi');
  });
});

应用程序组件.ts：

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatSidenavModule, MatListModule, RouterLink, provideAnimations()],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FlinkRegi';
}

我得到的错误： AppComponent > 应该渲染标题 错误：从“AppComponent”导入的“[object Object]”类型必须是独立组件/指令/管道或 NgModule。您是否忘记添加所需的@Component / @Directive / @Pipe 或@NgModule 注解？

AppComponent > 应该创建应用程序 错误：从“AppComponent”导入的“[object Object]”类型必须是独立组件/指令/管道或 NgModule。您是否忘记添加所需的@Component / @Directive / @Pipe 或@NgModule 注解？

AppComponent > 应具有“FlinkRegi”标题 错误：从“AppComponent”导入的“[object Object]”类型必须是独立组件/指令/管道或 NgModule。您是否忘记添加所需的@Component / @Directive / @Pipe 或@NgModule 注解？

我不知道问题出在哪里。我不知道 [object Object] 指的是什么，我几乎尝试了所有我能找到的解决方案。

Answer 1

您在

provideAnimations()

AppComponent

中添加了

imports

。在我看来，这就是你的问题的原因，因为如果我在我的复制中删除它，所有测试都会通过。