Error: inject() must be called from an injection context, Error: Expected undefined to be truthy

Question

我正在为我的 app.component 设置一个单元测试，我已经导入了所有必要的东西，但我收到一个我不明白的错误，在我的 angular.json 中激活“preserveSymlinks”：true但问题依然存在，我该如何解决？

错误： 错误：必须从注入上下文调用 inject()

我的ts文件：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { LoginService } from 'is-common';
import { CookieService } from 'ngx-cookie';
import { Api } from 'is-common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'ghai-front';
    isLogged: boolean = false;
    constructor(private router: Router,
        private loginService: LoginService,
        private cookie: CookieService,
        public api: Api) {
        router.events.subscribe((val) => {
            if (val instanceof NavigationEnd)
                this.isLogged = this.loginService.isLogged() === true && val.url !== '/login';
        })
        this.loginService.setApiURL('/api-tacticas');
        this.loginService.setDefaultClient(2);
    }
}

我的测试：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { Api } from 'is-common';
import { LoginService } from 'is-common';
import { HttpClientTestingModule } from '@angular/common/http/testing';


describe('AppComponent', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let api: Api;
    let loginService: LoginService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule,
                RouterTestingModule
            ],
            declarations: [
                AppComponent
            ],
            providers: [
                Api,
                LoginService
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
        }).compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        api = TestBed.inject(Api);
        loginService = TestBed.inject(LoginService);
    });

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

我的tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "paths": { "@angular/": [ "../node_modules/@angular/" ] }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Answer 1

我认为问题来自 Api、CookieService 或 LoginService。我会嘲笑这些外部依赖。

试试这个：

describe('AppComponent', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    // !! modify these lines !!
    let mockApi: jasmine.SpyObj<Api>;
    let mockLoginService: jasmine.SpyObj<LoginService>;
    let mockCookieService: jasmine.SpyObj<CookieService>;

    beforeEach(() => {
        // Create a new spy before each test
        // The first string is an identifier for the mocked object
        // The array of the strings are public methods
        // I don't know the public methods of API so we will give an empty object
        mockApi = {};
        mockLoginService = jasmine.createSpyObj<LoginService>('LoginService', ['isLogged', 'setApiURL', 'setDefaultClient']);
        mockCookieService = jasmine.createSpyObj<CookieService>('CookieService', ['get']);
        TestBed.configureTestingModule({
            imports: [
                HttpClientTestingModule,
                RouterTestingModule
            ],
            declarations: [
                AppComponent
            ],
            providers: [
                // !! Provide the mocks for all external dependencies
                { provide: Api, useValue: mockApi },
                { provide: LoginService, useValue: mockLoginService },
                { provide: CookieService, useValue: mockCookieService }
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
        }).compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
    });

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

我认为以上内容应该对您有所帮助并且应该有效。我总是嘲笑外部依赖。

Error: inject() must be called from an injection context, Error: Expected undefined to be truthy

Error: inject() must be called from an injection context, Error: Expected undefined to be truthy

angular

typescript

unit-testing

karma-jasmine