Running a single test file

AngularJasmineAngular CliKarma Runner

Angular Problem Overview


Is there a way to run ng test for a single file instead of for the entire test suite? Ideally, I'd like to get the quickest possible feedback loop when I'm editing a file, but karma executes the whole suite on each save, which is a bit slow when you build up a big enough test suite.


This is different from https://stackoverflow.com/questions/40683673/how-to-execute-only-one-test-spec-with-angular-cli in that that question is about running an individual spec. This is about running an individual file. The solution involves the same Jasmine spec feature, but the nature of the question is slightly different.

Angular Solutions


Solution 1 - Angular

I discovered that Jasmine allows you to prefix describe and it methods with an f (for focus): fdescribe and fit. If you use either of these, Karma will only run the relevant tests. To focus the current file, you can just take the top level describe and change it to fdescribe. If you use Jasmine prior to version 2.1, the focusing keywords are: iit and ddescribe.

This example code runs just the first test:

// Jasmine versions >/=2.1 use 'fdescribe'; versions <2.1 use 'ddescribe'
fdescribe('MySpec1', function () {
    it('should do something', function () {
        // ...
    });
});

describe('MyOtherSpec', function () {
    it('should do something else', function () {
        // ...
    });
});

Here is the Jasmine documentation on Focusing Specs, and here is a related SO article that provides additional thoughtful solutions.

Solution 2 - Angular

This can be achieved these days via the include option. https://angular.io/cli/test#options

It's a glob match, so as an example:

ng test --include='**/someFolder/*.spec.ts'

I can't find it in the 8.1.0 release notes, but @Swoox mentions below this is a feature after cli version 8.1.0. Thanks for figuring that out.

Solution 3 - Angular

It's worth mentioning that you can disable particular test without commenting by xdescribe and xit

xdescribe('Hello world', () => { 
  xit('says hello', () => { 
    expect(helloWorld())
        .toEqual('Hello world!');
  });
});

And as somebody already said if you want to focus on some test then fdescribe and fit

fdescribe('Hello world', () => { 
  fit('says hello', () => { 
    expect(helloWorld())
        .toEqual('Hello world!');
  });
});

Solution 4 - Angular

I found that ng test has an additional option --include which you can use in order to be able to run test for a single file, or for a particular directory, or for a bunch of files:

// one file
npm run test -- --include src/app/components/component/component-name.component.spec.ts

// directory or bunch of files
npm run test -- --include src/app/components

ng cli docs

Solution 5 - Angular

You can go to src/test.ts and can change the following line:

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

to

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

enter image description here

Solution 6 - Angular

In Angular 9 I have had luck with the following:

If you want to test a specific file:

ng test --test-file=path/to/your/file.component.spec.ts

If you have multiple projects in your Angular project and/or are using NX, you can specify an Angular project to test:

ng test project-name


You can also use

ng test --testNamePattern componentname

for something like path/to/your/component/componentname.spec.ts. This will scan every file in every project, and is slower.


If you want to test only what has changed since your last commit (using git or other version control)

ng test --only-changed

Not working in vanilla Angular.

Solution 7 - Angular

Using

ng test --main file.spec.ts

Solution 8 - Angular

Visual Studio Code Extension

The easiest way is to use the vscode-test-explorer extension along with its child angular-karma-test-explorer and jasmine-test-adapter, you'll get a list of current test to run one by one if you want:

enter image description here

This is the same answer I gave at this question, there's some more details there.

Solution 9 - Angular

You must have to go src/test.ts and can change the following line number code 18:

//Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);

to

//Then we find all the tests.
const context = require.context('./', true, /testing.component\.spec\.ts$/);

enter image description here

Solution 10 - Angular

I was looking for the answer. Your question thread did help me a lot. But, Some point was ambiguous. Especially, If you run the below CLI command.

npm run test -- --include src/app/component/your.component.spec.ts

It will run the single test file, but after running the test, the test browser will be closed immediately, you can't watch your test file due to the missing watch flag. Therefore you have to provide the watch flag as true value. I figured it out that the below CLI command is working fine with the watch flag.

ng test --watch=true "--include" "src/app/components/your.component.spec.ts"

Solution 11 - Angular

Why make it so hard?

  • run ng test

  • Open the link shown in the console:

enter image description here

  • On the top right, click on Debug:

enter image description here

  • Click on the test you want to solo run:

enter image description here

  • To re-run the test, refresh the browser window (e.g. with F5).

Solution 12 - Angular

If you are using IntelliJ IDE you can install the ' Karma ' plugin and run specs individually by clicking the ' run ' icon next to the spec test

enter image description here

Solution 13 - Angular

Works if you specify your spec file as parameter.

For example:

ng test foo.spec.ts

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
QuestionElliot LarsonView Question on Stackoverflow
Solution 1 - AngularElliot LarsonView Answer on Stackoverflow
Solution 2 - AngularLeviView Answer on Stackoverflow
Solution 3 - AngularDiPixView Answer on Stackoverflow
Solution 4 - Angularvar-binView Answer on Stackoverflow
Solution 5 - AngularRaghavView Answer on Stackoverflow
Solution 6 - AngularJoel KeslerView Answer on Stackoverflow
Solution 7 - AngularNiraj ChavanView Answer on Stackoverflow
Solution 8 - Angularluiscla27View Answer on Stackoverflow
Solution 9 - AngularPriti jhaView Answer on Stackoverflow
Solution 10 - AngularRiyadView Answer on Stackoverflow
Solution 11 - AngularHannes SchneidermayerView Answer on Stackoverflow
Solution 12 - AngularTonyView Answer on Stackoverflow
Solution 13 - AngulargustavomcastroView Answer on Stackoverflow