Can't run service in Angular2 test (code copy pasted from the docs)

user_2104324 0
Viewed 977

I have the following error (unit testing Angular2):

Cannot configure the test module when the test module has already been instantiated. Make sure you are not using inject before TestBed.configureTestingModule

Here is my code (it's basically a copy paste from the angular docs) which throws the above error:

import { TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component'
import { MyServiceService } from './my-service.service'

beforeEach(() => {
  // stub UserService for test purposes
  let userServiceStub = {
    isLoggedIn: true,
    user: { name: 'Test User'}
  };

  TestBed.configureTestingModule({

     declarations: [ AppComponent],
     providers:    [ {provide: MyServiceService, useValue: userServiceStub } ]
  });

  let fixture = TestBed.createComponent(AppComponent);
  let comp    = fixture.componentInstance;
  // UserService from the root injector
  let userService = TestBed.get(MyServiceService);
  //  get the "welcome" element by CSS selector (e.g., by class name)
  let de = fixture.debugElement.query(By.css('.nesto'));
  let el = de.nativeElement;

  it('should welcome "Bubba"', () => {
    userService.user.name = 'something'; // welcome message hasn't been shown yet
    fixture.detectChanges();
    expect(el.textContent).toContain('some');
  });
});

I want to run a service but it seems that I just can't do that.

angular javascript
2 Answers

The most likely problem is that you're attempting to run testing within your beforeEach(). You need to make sure all it() methods are outside/after the beforeEach():

beforeEach(() => {
  // stub UserService for test purposes
  let userServiceStub = {
    isLoggedIn: true,
    user: { name: 'Test User'}
  };

  TestBed.configureTestingModule({

     declarations: [ AppComponent],
     providers:    [ {provide: MyServiceService, useValue: userServiceStub } ]
  });

  let fixture = TestBed.createComponent(AppComponent);
  let comp    = fixture.componentInstance;

  // get the "welcome" element by CSS selector (e.g., by class name)
  let de = fixture.debugElement.query(By.css('.nesto'));
  let el = de.nativeElement;
});


it('should welcome "Bubba"', inject([MyServiceService], (userService) => {
  userService.user.name = 'something'; // welcome message hasn't been shown yet
  fixture.detectChanges();
  expect(el.textContent).toContain('some');
}));
user_77335700

This works, removed the instance in the beforeEach() and injected into the it().

All credits go to Z. Bagley

import { TestBed, async, inject } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AppModule } from './app.module';
import { AppComponent } from './app.component'
import { MyServiceService } from './my-service.service'
import { Inject } from '@angular/core';

beforeEach(() => {
  // stub UserService for test purposes
  let userServiceStub = {
    isLoggedIn: true,
    user: { name: 'Test User'}
  };

  TestBed.configureTestingModule({
     declarations: [ AppComponent],
     providers:    [ {provide: MyServiceService, useValue: userServiceStub } ]
  });
});
  it('should welcome "Bubba"', inject([MyServiceService], (userService) => {
    let fixture=TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    expect(userService.user.name).toContain('se');
}));
user_21043240
Related