Jasmine test for simple Angular2 component not working

Question

I have this simple component:

@Component({
    selector: 'messages',
    styleUrls: ['messages.component.scss'],
    templateUrl: 'messages.component.html',
})
export class MessagesComponent implements OnInit {

    constructor(private dataService: DataService) {}

    public getOne(): number{
        return 1;
    }
}

I'm trying to run a test for it but I can't get it to work please help:

describe('Component: MessagesComponent', () => {
    let component: MessagesComponent;

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

        const fixture = TestBed.createComponent(MessagesComponent);
        component = fixture.componentInstance;
    });

    it('should have a defined component', () => {
        expect(true).toBeTruthy();
    });

});

(I'm using webpack if that is relevant)

This is the error I get:

    Error: This test module uses the component MessagesComponent
 which is using a "templateUrl", but they were never compiled.
 Please call "TestBed.compileComponents" before your test.

score 1 · Accepted Answer · edited May 23 '17 at 10:31

Error: This test module uses the component MessagesComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.

When using Webpack, you shouldn't need to compile your components (with templateUrl). The templateUrl's should get converted to inline templates when you use the angular2-template-loader.

See the webpack.test.js example from the Angular docs. You will need to make sure you have the dependency for the loader. I would imagine you should already have it to be used for the main project though

"devDepdendencies": {
  "angular2-template-loader": "^0.4.0",
}

If you're still confused about the single config file I linked to above, you might just want to read the entire Angular docs on webpack. Shouldn't take that long. But it will walk you through getting set up for both the main application and the tests.

Also looking at your previous question, your webpack config doesn't have any sass support either. I imagine this is something that you have configured in the main application webpack config. You can look at that to see how it is configured. Or you can check this out. It's basically a project I put together from the Angular docs, just as a reference with everything in one place. The Angular docs doesn't add any sass support, but the linked project does add it.

score 1 · Answer 2 · answered Feb 20 '20 at 09:27

You get this test failure message when the runtime environment compiles the source code during the tests themselves.

To correct the problem, call compileComponents() as explained below.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ YourComponent ],
  })
  .compileComponents()
  .then(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
  });
}));

here we must call compileComponents() with async function and then create a component instance in 'then block', this will solve the problem.

refer https://angular.io/guide/testing#compile-components for more information.

Jasmine test for simple Angular2 component not working

2 Answers2