CODEWITHSUNDEEP
angularapitestingautomated-testskarma-jasmine
Yoan
Yoan

Reputation: 76

Angular 8 Testing with Karma and Jasmine NullInjectorError: R3InjectorError(DynamicTestModule)[api -> api]: NullInjectorError: No provider for api

Karma error messages:

Karma error messages

app.component.spec.ts file code:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing'
import { HttpClientModule } from '@angular/common/http';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

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

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

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('dalivalidb app is running!');
  });
});

I'm new to testing I'm trying to run my first automated test with Karma and Jasmine provided by Angular. I've tried running the test but encountered 3 out of 3 fails regarding an API. Unfortunately I didn't find any relevant information about how to handle such error and I'm not expter in API too. So if anyone had encountered any simmilar issues or knows a fix it would be appreciated!!

I`ve tried multiple things including adding imports to the app.component.spec.ts

imports: [
        RouterTestingModule,
        HttpClientModule
         ],

You can check the website on dalivalidb.netlify.app

Upvotes: 2

Views: 2578

Answers (1)

AliF50
AliF50

Reputation: 18849

It seems you have a dependency on api in app.component.ts.

Something like this:

constructor(private api: api, ...) {}

You have to provide a mock for api.

Try this:

let api: api;
describe('AppComponent', () => 
  beforeEach(async(() => {
    let mockApi = {}; // mock your API as a plain JavaScript object
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: api, useValue: mockApi } // provide the mock like so.
      ]
    }).compileComponents();
  }));

Show the full app.component.ts and I think I can help you a bit more.

Upvotes: 2

Related Questions