运行在 Angular 中使用 Jest 测试用例时出现“无法解析 CustomTranslationLoader 的所有参数”错误

Question

我正在尝试为登录页面编写我的第一个测试用例。我的 ts 文件如下所示：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {AuthenticationService} from '../../../services/authentication.service';
import {HttpErrorResponse} from "@angular/common/http";
import _ from "lodash";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;
  private returnUrl: string;
  invalidCredentials = false;
  error = '';
  forbiddenUser = false;

  constructor(private formBuilder: FormBuilder,
              private route: ActivatedRoute,
              private router: Router,
              private authenticationService: AuthenticationService) {

  }

  username: string;
  password: string;

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  authenticate() {
    let code;
    let accessToken;
    let refreshToken;
    code = localStorage.getItem('code');
    if (code) {
      code = window.atob(code);
      accessToken = localStorage.getItem('accessToken');
      refreshToken = localStorage.getItem('refreshToken');
      if (accessToken && refreshToken) {
        accessToken = window.atob('accessToken');
        refreshToken = window.atob('refreshToken');
      }
    }
  }

  onSubmit() {
    this.invalidCredentials = false;
    this.forbiddenUser = false;

    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';

    // stop here if form is invalid
    if (this.loginForm.invalid) {
      return;
    }

    this.authenticationService.login(this.loginForm.value.username, this.loginForm.value.password).subscribe({
      next: (data) => {
        this.router.navigateByUrl(this.returnUrl);
      },
      error: (errRes: HttpErrorResponse) => {
        if (errRes.status === 403) {
          if (errRes.error.ErrorMessage === "loginFailure") {
            this.invalidCredentials = true;
          } else if (_.has(errRes, 'error.username')) {
            this.forbiddenUser = true;
          }
        }
      }
  });
  }

}

我的 spec 文件如下所示：

import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';
import {AuthenticationService} from '../../../services/authentication.service';
import { createComponent, Page, CommonTestUtilsModule, provideMockObject } from '@webex/common/test-utils';
import { CommonUiMomentumChModule } from '@webex/common/ui/momentum-ch';


const MockAuthenticationService = {
  login: jest.fn(),
};

class LoginComponentPage extends Page<LoginComponent> {
  constructor(fixture: ComponentFixture<LoginComponent>) {
    super(fixture);
  }
}

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>
  let page: LoginComponentPage;
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      providers: [
        provideMockObject(AuthenticationService),
        {
          provide: AuthenticationService,
          useValue: MockAuthenticationService,
        },
      ],
      imports: [
        CommonUiMomentumChModule,
        CommonTestUtilsModule,
        FormsModule,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    ({ fixture, component, page } = createComponent(LoginComponent, LoginComponentPage));
    fixture.detectChanges();
  });

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


});

当我尝试运行这个测试时，它给了我错误：

Can't resolve all parameters for CustomTranslationLoader: (?).

并显示：

`期望（收到）.toBeTruthy()

Received: undefined`

我试过 console.log('output', fixture) ，它 returns undefined.

我哪里错了？请帮忙

Answer 1

我认为您在创建组件时出错了。如果你需要创建一个组件，你需要使用 TestBed like

fixture = TestBed.createComponent(BannerComponent);
component = fixture.componentInstance;

所以我认为您的代码有问题：

({ fixture, component, page } = createComponent(LoginComponent, LoginComponentPage));

重要：您需要使用从 TestBed

创建的实例

希望你做对了。

运行在 Angular 中使用 Jest 测试用例时出现“无法解析 CustomTranslationLoader 的所有参数”错误

'Can't resolve all parameters for CustomTranslationLoader ' error while running test cases using Jest in Angular

jestjs

angular

ts-jest

运行 在 Angular 中使用 Jest 测试用例时出现“无法解析 CustomTranslationLoader 的所有参数”错误

'Can't resolve all parameters for CustomTranslationLoader ' error while running test cases using Jest in Angular

jestjs

angular

ts-jest

运行在 Angular 中使用 Jest 测试用例时出现“无法解析 CustomTranslationLoader 的所有参数”错误