How to execute only one test spec with angular-cli

AngularJasmineAngular Cli

Angular Problem Overview

I have Angular2 project build with Angular-CLI (beta 20).

Is there a way to run tests against only one selected spec file?

I used to have a project based on Angular2 quick start, and I could manually add specs to jasmine file. But I don't know how to set this up outside of karma testing or how to limit karma tests to specific files with Angular-CLI builds.

Angular Solutions

Solution 1 - Angular

Each of your .spec.ts file have all its tests grouped in describe block like this:

describe('SomeComponent', () => {...}

You can easily run just this single block, by prefixing the describe function name with f:

fdescribe('SomeComponent', () => {...}

If you have such function, no other describe blocks will run. Btw. you can do similar thing with it => fit and there is also a "blacklist" version - x. So:

  • fdescribe and fit causes only functions marked this way to run
  • xdescribe and xit causes all but functions marked this way to run

Solution 2 - Angular

Configure test.ts file inside src folder:

const context = require.context('./', true, /\.spec\.ts$/);

Replace /\.spec\.ts$/ with the file name you want to test. For example: /app.component\.spec\.ts$/

This will run test only for app.component.spec.ts.

Solution 3 - Angular

You can test only specific file with the Angular CLI (the ng command) like this:

ng test --main ./path/to/test.ts

Further docs are at https://angular.io/cli/test

Note that while this works for standalone library files, it will not work for angular components/services/etc. This is because angular files have dependencies on other files (namely src/test.ts in Angular 7). Sadly the --main flag doesn't take multiple arguments.

Solution 4 - Angular

This worked for me in every case:

ng test --include='**/dealer.service.spec.ts'

However, I usually got "TypeError: Cannot read property 'ngModule' of null" for this:

ng test --main src/app/services/dealer.service.spec.ts

Version of @angular/cli 10.0.4

Solution 5 - Angular

use --include

it's work with --include

ng test --include src/app/path-to-component/path-component.component.spec.ts

I tried --main but it shows all fail results while it's not. I think --main will change the main test.ts file.

Solution 6 - Angular

If you want to be able to control which files are selected from the command line, I managed to do this for Angular 7.

In summary, you need to install @angular-devkit/build-angular:browser and then create a custom webpack plugin to pass the test file regex through. For example:

angular.json - change the test builder from @angular-devkit/build-angular:browser and set a custom config file:

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js - create a webpack configuration that reads the regex from the command line:

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts - edit the spec

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

Then use as follows to override the default:

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

I documented the backstory here, apologies in advance for types and mis-links. Credit to the answer above by @Aish-Anu for pointing me in the right direction.

Solution 7 - Angular

In a bash terminal I like to use the double dash. Using VS Code, you can right click on the spec file in the explorer, or on the open tab. Then select 'Copy Relative Path'. Run the command below pasting the relative path in from the clipboard.

npm t -- --include relative/path/to/file.spec.ts

The double dash signals the end of your command options for npm t and passes anything after that to the next command which is pointing to ng t. It's doesn't require any modification and quickly gives desired results.

Solution 8 - Angular

This is working for me in Angular 7. It is based on the --main option of the ng command. I am not sure if this option is undocumented and possibly subject to change, but it works for me. I put a line in my package.json file in scripts section. There using the --main option of with the ng test command, I specify the path to the .spec.ts file I want to execute. For example

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

You can run the script as you run any such script. I run it in Webstorm by clicking on "test 1" in the npm section.

Solution 9 - Angular

A simple way to do this is to start the describe and all it with f.

fdescribe('testecomponente', () => {
  fit('should create', () => {
    //your code 
  }
  
}

Solution 10 - Angular

I solved this problem for myself using grunt. I have the grunt script below. What the script does is takes the command line parameter of the specific test to run and creates a copy of test.ts and puts this specific test name in there.

To run this, first install grunt-cli using:

npm install -g grunt-cli

Put the below grunt dependencies in your package.json:

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

To run it save the below grunt file as Gruntfile.js in your root folder. Then from command line run it as:

grunt --target=app.component

This will run app.component.spec.ts.

Grunt file is as below:

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
	clean: ['temp.conf.js','src/temp-test.ts'],
	copy: {
	  main: {
		files: [
			 {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
			 {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
			 ],
	  }
	},
	'string-replace': {
		  dist: {
			files: {
			  'temp.conf.js': 'temp.conf.js',
			  'src/temp-test.ts': 'src/temp-test.ts'
			},
			options: {
			  replacements: [{
				pattern: /test.ts/ig,
				replacement: 'temp-test.ts'
			  },
			  {
				pattern: /const context =.*/ig,
				replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
			  }]
			}
		}
	},
	'exec': {
		sleep: {
		  //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
		  command: 'ping 127.0.0.1 -n 4 > nul',
		  stdout: true,
		  stderr: true
		},
		ng_test: {
		  command: 'ng test --config=temp.conf.js',
		  stdout: true,
		  stderr: true
		}
	}
  });

  // Load the plugin that provides the "uglify" task.
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-string-replace');
	grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};

Solution 11 - Angular

Adding to this for people like me who were searching for a way to run a single spec in Angular and found this SO.

According to the latest Angular docs (v9.0.6 at time of writing), the ng test command has an --include option where you can specify a directory of *.spec.(ts|tsx) files or just a single .spec.(ts|tsx) file itself.

https://angular.io/cli/test

Solution 12 - Angular

Just small change need in test.ts file inside src folder:

const context = require.context('./', true, /test-example\.spec\.ts$/);

Here, test-example is the exact file name which we need to run

In the same way, if you need to test the service file only you can replace the filename like "/test-example.service"

Solution 13 - Angular

If you are working in a project that uses monorepo architecture then you must write the project's name after script in the command line. For example:

ng test MyProject1Name -- --include='myComponent.component.spec.ts'

Solution 14 - Angular

From angular-cli you can run this command and the test will include only that spec file which you want to.

> ng test --includes path of spec file

Categories
Recommended Angular Solutions
Recommended Jasmine Solutions
Recommended Angular Cli Solutions

Previous Solution:

Multiple RUN vs. single chained RUN in Dockerfile, which is better?

DockerDockerfile

Next Solution:

Checking version of angular-cli that's installed?

node.jsAngularNpmAngular Cli

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZieluView Question on Stackoverflow
Solution 1 - AngularTomek SułkowskiView Answer on Stackoverflow
Solution 2 - AngularAish AnuView Answer on Stackoverflow
Solution 3 - AngulariislucasView Answer on Stackoverflow
Solution 4 - AngularPeterBView Answer on Stackoverflow
Solution 5 - AngularMansour AlnasserView Answer on Stackoverflow
Solution 6 - Angular6EQUJ5View Answer on Stackoverflow
Solution 7 - AngularMatt WoodruffView Answer on Stackoverflow
Solution 8 - Angularuser2367418View Answer on Stackoverflow
Solution 9 - AngularRaphael SouzaView Answer on Stackoverflow
Solution 10 - AngularvanvalView Answer on Stackoverflow
Solution 11 - AngularastronomotrousView Answer on Stackoverflow
Solution 12 - Angularmadhu srinivasView Answer on Stackoverflow
Solution 13 - AngularRamin MammadzadaView Answer on Stackoverflow
Solution 14 - AngularArpit TrivediView Answer on Stackoverflow