我正在try 测试ANGLE中的普通class(不是组件),它有一个服务依赖项和一个单独的构造函数参数.我使用依赖项为组件测试镜像了the docs,但我得到了以下错误:

Unexpected value 'MyClass' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

my-service.service.ts:

@Injectable({
    providedIn: 'root',
})
export class MyService { ... }

my-class.ts:

import { inject } from '@angular/core';
import { MyService } from './my-service.service';

export class MyClass {
    private _myService: MyService = inject(MyService);
    private _name: string;

    constructor(name: string) {
        this._name = name;
    }
}

my-class.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyService } from './my-service.service';
import { MyClass } from './my-class';

describe('MyClass', () => {
    let myClass: MyClass;
    let mockMyService: Partial<MyService>;
    let fixture: ComponentFixture<MyClass>;

    beforeEach(() => {
        mockMyService = {};

        TestBed.configureTestingModule({
            imports: [MyClass],
            providers: [{ provide: MyService, useValue: mockMyService }],
        });

        fixture = TestBed.createComponent(MyClass); // causes error
        myClass = fixture.componentInstance;

        TestBed.inject(MyService);
    });

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

更新my-class.spec.ts

import { MyClass } from './my-class';

describe('MyClass', () => {
    let myClass: MyClass;

    beforeEach(() => {
        myClass = new MyClass('someName');
    });

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

如何使用服务依赖测试这个普通类?

推荐答案

由于您使用MyClass作为组件,因此需要@Componentdecorator 将其初始化为组件,这样我们就可以使用组件decorator 创建一个伪类,并将MyClass的所有内容继承到测试类MyClassMocked

因为你在导入数组中使用了MyClass,这意味着它必须是standalone: true,所以我已经添加了,如果你不想要standalone as true,那么你需要将MyClass添加到declarations数组中!

此外,我们还需要将类MyClass更新为MyClassMocked,无论它在哪里用作类型!

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyService } from './my-service.service';
import { MyClass } from './my-class';

import { inject, Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({ selector: 'my-class', standalone: true, template: '' })    
export class MyClassMocked extends MyClass {
     constructor() { super(); }
}

describe('MyClass', () => {
    let myClass: MyClassMocked;
    let mockMyService: Partial<MyService>;
    let fixture: ComponentFixture<MyClassMocked>;

    beforeEach(() => {
        mockMyService = {};

        TestBed.configureTestingModule({
            imports: [MyClassMocked],
            providers: [{ provide: MyService, useValue: mockMyService }],
        });

        fixture = TestBed.createComponent(MyClassMocked); // should work!
        myClass = fixture.componentInstance;

        TestBed.inject(MyService);
    });

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

Angular相关问答推荐

Goto锚定在嵌套容器中,具有溢出自动

Angular material 输入字段中的图标未显示

以Angular 表示显示特殊字符

基于另一个控制值显示值的Angular 数组

从Angular 14更新到15个多边形.ts问题

try 测试具有Angular material 下拉列表的组件时,在Angular 17中发现&q;错误的意外合成属性@TransitionMessages

NG构建后多余的国旗

如何重新显示ngbAlert(Bootstrap widgest for Angular)消息后再次驳回它

Component RegisterComponent模板出现Angular 错误

升级到 Ng 16 - npm 错误!对等依赖冲突:@angular/compiler-cli@16.2.1

我需要取消订阅路由的可观察事件吗

使用 primeng Apollo 主题进行实时部署时多次加载 theme.css 和 preloading.css 文件

如何在运行Angular应用程序的容器中访问Docker容器?

Nz 树 Select .如何在子 node 中显示父 node 名称?

尽管模型中的变量发生了变化,但Angular 视图没有更新

异步管道模板中的局部变量(Angular 2+)

如何在不刷新整页的情况下更新组件

如何从组件模板将数组作为 Input() 传递?

Angular 2:将外部js文件导入组件

测试一个包含 setTimeout() 的函数