What are the "spec.ts" files generated by Angular CLI for?

Question

I am using Angular CLI to generate and serve projects. It seems to work well – though for my little learning projects, it produces more than I need – but that's to be expected.

I've noticed that it generates spec.ts for each Angular element in a project (Component, Service, Pipe, etc). I've searched around but have not found an explanation of what these files are for.

Are these build files which are normally hidden when using tsc? I wondered because I wanted to change the name of a poorly named Component I'd created and discovered that the name was also referenced in these spec.ts files.

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { PovLevelComponent } from './pov-level.component';

describe('Component: PovLevel', () => {
  let builder: TestComponentBuilder;

  beforeEachProviders(() => [PovLevelComponent]);
  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
    builder = tcb;
  }));

  it('should inject the component', inject([PovLevelComponent],
      (component: PovLevelComponent) => {
    expect(component).toBeTruthy();
  }));

  it('should create the component', inject([], () => {
    return builder.createAsync(PovLevelComponentTestController)
      .then((fixture: ComponentFixture<any>) => {
        let query = fixture.debugElement.query(By.directive(PovLevelComponent));
        expect(query).toBeTruthy();
        expect(query.componentInstance).toBeTruthy();
      });
  }));
});

@Component({
  selector: 'test',
  template: `
    <app-pov-level></app-pov-level>
  `,
  directives: [PovLevelComponent]
})
class PovLevelComponentTestController {
}

score 359 · Accepted Answer · edited Apr 24 '19 at 17:11

359

The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file for each .ts file. They are run using the Jasmine javascript test framework through the Karma test runner (https://karma-runner.github.io/) when you use the ng test command.

You can use this for some further reading:

https://angular.io/guide/testing

edited Apr 24 '19 at 17:11

MBWise

700
1
8
17

answered May 28 '16 at 19:13

awiseman

5,539
1
18
15

23

Thanks, I was wondering this myself. Suppose I don't want to run any tests, can I safely delete the .spec files? (and also the test folders and files such as the e2e folder?) – Kokodoko Nov 29 '16 at 16:56
10

I also feel like this question requires a little more answering. Can we just totally ignore these files and just go about our work ? – cah1r Feb 08 '17 at 10:18
24

As awiseman states, the spec files are indeed for testing of you application. If you don't want to use the test files you can simply delete or ignore them. Your project will continue to function without the spec files. – dennismuijs Feb 13 '17 at 13:55
41

when you generate an new component with CLI you can add `--spec=false` to exclude the generation of a spec file. The full command for generating a new component would be: `ng g component comp-name --spec=false`. More info here: https://github.com/angular/angular-cli/wiki/generate-component – Dean May 31 '17 at 19:14
15

this can be disabled by modifying `angular-cli.json` like this: `{ "defaults": { "component": { "spec": false } } }` – Ali Sherafat Feb 19 '18 at 18:35
karma is a "test" runner no "task" runner – Amin Rahimi Jun 05 '18 at 14:55
1

What if we want to run the test in future, is there a command to regenerate the spec.ts files? – Vibhor Dube May 31 '20 at 05:09
@MateuszMigała We can safely delete spec.ts file. it can be disabed by "ng g component comp-name --spec=false" – Anjali Sharma Nov 06 '20 at 07:12
2

For Angular 13: I couldn't change the defaults in angular-cli.json (results in error) and `--spec=false` doesn't work. *Now use `--skip-tests` to ng generate service without spec.ts file. https://angular.io/cli/generate – arielhasidim Dec 11 '21 at 11:29
Even though those spec.ts files are a good start for writing UTs. – Reza Ahmadi Jan 05 '22 at 05:00
I think it is more that specs are a 'Jasmine convention' and Angular uses Jasmine by default. You can find the definition of Specs in the Jasmine ['Your first suite'](https://jasmine.github.io/tutorials/your_first_suite) tutorial. You can easily find spec files elsewhere such as https://github.com/Azure/fetch-event-source/tree/main/src – icc97 Aug 21 '23 at 16:28

score 30 · Answer 2 · answered Jun 14 '18 at 20:23

30

if you generate new angular project using "ng new", you may skip a generating of spec.ts files. For this you should apply --skip-tests option.

ng new ng-app-name --skip-tests

answered Jun 14 '18 at 20:23

trueboroda

2,650
26
24

3

Can you set this option after the project has been generated? – HughHughTeotl Oct 11 '19 at 22:39
@HughHughTeotl Yes for future service generation, not for the ones that already been generated. As said around: if you don't plan on testing you can delete spec.ts files manually. – arielhasidim Dec 11 '21 at 11:32

score 4 · Answer 3 · answered Jul 19 '18 at 17:55

4

The .spec.ts files are for unit tests for individual components. You can run Karma task runner through ng test. In order to see code coverage of unit test cases for particular components run ng test --code-coverage

answered Jul 19 '18 at 17:55

Pritam Sinha

51
4

score 2 · Answer 4 · answered Feb 22 '20 at 12:29

2

.spec.ts file is used for unit testing of your application.

If you don't to get it generated just use --spec=false while creating new Component. Like this

ng generate component --spec=false mycomponentName

answered Feb 22 '20 at 12:29

R15

13,982
14
97
173

What are the "spec.ts" files generated by Angular CLI for?

4 Answers4