why component generated by ng cli has the spec file with 2 beforeeach method?

user_202382 0
Viewed 755

When I run ng c my-component, I get a spec file that has 2 beforeEach methods.

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ]
   })
   .compileComponents();
 }));

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

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

Why do I have 2 beforeEach, do I need both of them? All the tutorial are showing only the second, i.e. the non-asynchronous one. Also code needed to run a basic test is split among those 2 methods. Any reason?

Thanks for helping.

karma-jasmine angular
3 Answers

As compileComponents() is an async function returning a promise the beforeEach is marked with async. So Jasmine knows that everything has to be resolved before moving to the next step (-> here the second beforeEach). The second beforeEach includes synchronous code only so it's not marked with async.

If you put everything in one beforeEach it could happen that compileComponents() is not resolved until createComponent(MyComponent) is called - this could lead to errors but if compileComponents() is fast enough it won't.

user_92404350

The spec file is a test suite file. Essentially one of the beforeEaches sets up your test bed and the other creates an instance of your component for testing. You do need them both in order to write your tests and for the tests to actually work. The only test you are running is the it block. So essentially it is up to you how to define your test env.

user_67723730
PowerKiKi_377060
Related