錯誤：<toHaveBeenCalled>：預期是間諜，但得到了物件（{authUser：在AuthService.authUser上的間諜}）。用法：expect(<spyObj&

我正在嘗試創建一個模擬服務，以便在單擊表單按鈕后呼叫單擊處理程式，然后呼叫我的模擬服務中的一個方法。這里有什么問題？剛開始和茉莉打交道。

我的測驗：

describe('Login submit', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
    TestBed.configureTestingModule({
      providers: [
        AuthService,
        HttpClientTestingModule,
        HttpClientModule,
        HttpClient,
        HttpHandler,
        MatSnackBar,
        Overlay,
        FormBuilder,
      ],
    });
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 it('authService should launch', () => {
    let mockAuthService = jasmine.createSpyObj('AuthService', ['authUser']);
    const mockUser = { usernsme: 'Marcus', password: 'Marcus#1' };
    const compiled = fixture.debugElement;
    const loginBtn = compiled.query(By.css('.login-btn')).nativeElement;
    loginBtn.dispatchEvent(new Event('click'));
    expect(mockAuthService).toHaveBeenCalled();
  });
});

在此之前我做了一個測驗，我手動將用戶傳遞給方法，但現在我需要在按鈕上作業

登錄組件的功能：

userLoginClick() {
    if (!this.form.valid) {
      this.pushNotificationService.createNotification(
        'Data format is incorrect'
      );

      return false;
    }
    const user = {
      username: this.form.controls['username'].value,
      password: this.form.controls['password'].value,
    };

    this.authService.authUser(user);
  }

來自身份驗證服務的功能：

authUser(user: User) {
    return this.http
      .post(
        `${environment.domain}${BackendRoutes.Login}`,
        user,
        this.httpOptions
      )
      .subscribe((data: any) => {
        if (!data.success) {
          this.pushNotificationService.createNotification(data.message);
        } else {
          this.router.navigate([`/${Paths.Lobby}`]);
          this.storeUser(data.token, data.user);
        }
      });
  }

uj5u.com熱心網友回復：

進行以下更改，在評論后面加上“！！” 和解釋。

describe('Login submit', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  // !! Create mockAuthService here !!
  let mockAuthService: jasmine.SpyObj<AuthService>;
beforeEach(async () => {
    // !! Create mock in a before each so we have a fresh mock for each test.
    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['authUser']);
    TestBed.configureTestingModule({
      providers: [
        // !! Provide mocked AuthService instead of the real one for the tests
        { provide: AuthService, useValue: mockAuthService },
        HttpClientTestingModule,
        HttpClientModule,
        HttpClient,
        HttpHandler,
        MatSnackBar,
        Overlay,
        FormBuilder,
      ],
    });
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 it('authService should launch', () => {
    // !! Get rid of this line, we don't need it anymore.
    // let mockAuthService = jasmine.createSpyObj('AuthService', ['authUser']);
    const mockUser = { usernsme: 'Marcus', password: 'Marcus#1' };
    const compiled = fixture.debugElement;
    const loginBtn = compiled.query(By.css('.login-btn')).nativeElement;
    loginBtn.dispatchEvent(new Event('click'));
    // !! Change this line to mockAuthService.authUser (it should be the method and not the object).
    expect(mockAuthService.authUser).toHaveBeenCalled();
  });
});

這是學習使用 Angular 進行單元測驗的一個很好的資源：https ://testing-angular.com/ 。

標籤：有角度的茉莉花角度测试

上一篇：角度字串變數未系結到模板

下一篇：我應該用什么來替換Angular12中的queryParamsHandling？