What are the "spec.ts" files generated by Angular CLI for?
Solution 1
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
Solution 2
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
Solution 3
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
Solution 4
.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
Related videos on Youtube
spring
Updated on October 24, 2020Comments
-
spring over 3 years
I'm new to Angular 2 (and Angular in general...) and am finding it very engaging. 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 namedComponent
I'd created and discovered that the name was also referenced in thesespec.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 { }
-
Kokodoko over 7 yearsThanks, 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?)
-
cah1r about 7 yearsI also feel like this question requires a little more answering. Can we just totally ignore these files and just go about our work ?
-
dennismuijs about 7 yearsAs 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.
-
Dean almost 7 yearswhen 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: github.com/angular/angular-cli/wiki/generate-component -
Ali Sherafat about 6 yearsthis can be disabled by modifying
angular-cli.json
like this:{ "defaults": { "component": { "spec": false } } }
-
Amin Rahimi almost 6 yearskarma is a "test" runner no "task" runner
-
HughHughTeotl over 4 yearsCan you set this option after the project has been generated?
-
Vibhor Dube almost 4 yearsWhat if we want to run the test in future, is there a command to regenerate the spec.ts files?
-
Anjali Sharma over 3 years@MateuszMigała We can safely delete spec.ts file. it can be disabed by "ng g component comp-name --spec=false"
-
arielhasidim over 2 yearsFor 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. angular.io/cli/generate -
arielhasidim over 2 years@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.
-
Reza Ahmadi over 2 yearsEven though those spec.ts files are a good start for writing UTs.