Running a single test file

Question

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 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.

Possible duplicate of [How to execute only one test spec with angular-cli](https://stackoverflow.com/questions/40683673/how-to-execute-only-one-test-spec-with-angular-cli) — dota2pro, May 01 '19 at 18:26
You can find an answer here: https://stackoverflow.com/questions/40683673/how-to-execute-only-one-test-spec-with-angular-cli/58119974#58119974 — Sahil Shikalgar, Sep 26 '19 at 15:22
You can find an answer here: https://stackoverflow.com/questions/40683673/how-to-execute-only-one-test-spec-with-angular-cli/58119974#58119974 — Sahil Shikalgar, Sep 26 '19 at 15:25
I believe this is the best answer to this question now that angular has added glob matching via the include param https://stackoverflow.com/a/59723121/2002095 — Levi, Jun 23 '22 at 19:40

score 374 · Accepted Answer · edited Oct 02 '20 at 22:17

374

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.

edited Oct 02 '20 at 22:17

MAbraham1

1,717
4
28
45

answered Dec 17 '16 at 05:19

Elliot Larson

10,669
5
38
57

9

Can't believe such important functionality is not more obvious and straightforward. – Ash Oct 16 '18 at 00:26
27

it works but it is not ideal because you need to change the source code and you can end up checking in the modified code in source control. – Marco Altieri Nov 23 '18 at 09:18
5

Please add links to [official documentation](https://jasmine.github.io/2.1/focused_specs.html), when possible – eleuteron Nov 28 '18 at 07:45
The above documentation link is broken. Here is the new [link](https://jasmine.github.io/api/3.4/global.html#fdescribe) – Pankaj Jun 28 '19 at 15:53
1

Ok fdescribe is one option. But what about if project has 100spec files? And you want to run just one spec file? ng test compile all files... – vanrado Dec 04 '19 at 11:31
1

This is kind of answer you could only get on Stack Overflow and not in an official documentation. – Neurotransmitter Apr 01 '20 at 10:40

Levi · Answer 2 · 2020-01-14T15:37:23.760

101

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.

edited Jan 14 '20 at 15:37

answered Jan 13 '20 at 19:41

Levi

1,552
1
11
10

1

This seems like a recent update. Might want to include what version is needed. CLI 8.1 is needed. – Swoox Jan 14 '20 at 12:30
Seems to be removed in v9.1 :( – rmcsharry May 10 '20 at 16:45
4

I just tested this in CLI v9.1.0 and it works perfectly. – Sajjan Singh May 14 '20 at 14:48
2

Works in CLI v10.0.4 too – David Aug 27 '20 at 09:38
1

Works with CLI v12 – distante Oct 19 '21 at 10:34
1

Works with Angular CLI: 13.0.4 too – dev_mustafa Jul 25 '22 at 09:54

score 41 · Answer 3 · answered Feb 13 '20 at 12:06

41

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

answered Feb 13 '20 at 12:06

var-bin

441
4
3

Angular 9 - it seems to have been removed – rmcsharry May 10 '20 at 16:44
2

No, it's still available in NG 9. – tephyr Jun 11 '20 at 17:05
This is the only solution that worked for me. It's even still available in Angular 11, according to my tests. – Bohao LI Jul 26 '22 at 15:45
Doesn't seem to be there in angular 14. Or is there something else going on – O'Rooney Jan 27 '23 at 01:38

score 40 · Answer 4 · answered Sep 14 '18 at 13:59

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!');
  });
});

score 17 · Answer 5 · edited Nov 27 '19 at 14:35

17

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$/);

edited Nov 27 '19 at 14:35

Roman Mahotskyi

4,576
5
35
68

answered Nov 07 '19 at 14:48

Raghav

8,772
6
82
106

2

Strictly speaking, this sounds like the most correct answer even though most questions on how to do this have the problem solved by using fit and fdescribe. There is a git issue to accomplish this more easily in Karma: https://github.com/karma-runner/karma/issues/1507. Ideally, though not simply, we could configure Karma so we could make changes to one test, and then just click on it in the browser to rerun it with the update. – pumpkinthehead Dec 18 '19 at 16:43

luiscla27 · Answer 6 · 2022-12-28T20:24:20.390

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:

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

UPDATE DEC/2021: Angular Karma Test Explorer has been deprecated, please consider using Karma Test Explorer instead

Joel Kesler · Answer 7 · 2021-10-15T07:36:58.057

6

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.

edited Oct 15 '21 at 07:36

answered Aug 13 '20 at 01:46

Joel Kesler

146
1
3

I tried to use --only-changed But it is showing an Invalid option, I have gone through the Angular documentation and there is no such option defined. Could you please add some dummy project where it is working? – Jitendra Khatri Aug 06 '21 at 14:33
--Only-changed does not exist in angular cli, please provide reference to angular source and documentation providing this feature – user763648 Oct 04 '21 at 22:33
Does `ng test -- --only-changed` work for either of you? We use NX for our Angular mono-repo, and it may have modified the ng commands. We are also using testing library with angular, which may have also changed things. – Joel Kesler Oct 15 '21 at 07:31

score 5 · Answer 8 · edited Nov 25 '21 at 14:54

5

Using

ng test --main file.spec.ts

edited Nov 25 '21 at 14:54

Tomerikoo

18,379
16
47
61

answered May 30 '19 at 13:33

Niraj Chavan

91
1
4

score 5 · Answer 9 · edited Jul 04 '22 at 15:46

5

Get the relative path for your test file & provide like this

ng test --include=src\app\app.component.spec.ts

It works for me!!

edited Jul 04 '22 at 15:46

Tyler2P

2,324
26
22
31

answered Jul 04 '22 at 07:12

lazycoder

51
1
3

2

ng test --include src\app\app.component.spec.ts works as well – De Bonheur Jul 28 '22 at 19:15

score 3 · Answer 10 · edited Feb 03 '20 at 11:09

3

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$/);

edited Feb 03 '20 at 11:09

Kalana

5,631
7
30
51

answered Feb 03 '20 at 10:47

Priti jha

145
1
4

score 1 · Answer 11 · edited Nov 25 '21 at 16:18

1

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"

edited Nov 25 '21 at 16:18

cigien

57,834
11
73
112

answered Nov 25 '21 at 14:46

Riyad

339
4
10

1

This is not single test – user1034912 Nov 03 '22 at 08:25
Following helped me Riyad, thanks: ng test --watch=true --include 'src/app/shared/helper/data-override-helper.spec.ts' – Kieran Ryan May 08 '23 at 15:48

score 0 · Answer 12 · answered Nov 30 '21 at 18:33

0

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

answered Nov 30 '21 at 18:33

Tony

58
9

score 0 · Answer 13 · answered Apr 24 '22 at 08:13

0

Why make it so hard?

run ng test
Open the link shown in the console:

On the top right, click on Debug:

Click on the test you want to solo run:

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

answered Apr 24 '22 at 08:13

Hannes Schneidermayer

4,729
2
28
32

score 0 · Answer 14 · answered Aug 28 '22 at 06:56

For JetBrains WebStorm Users Only

I don't have ng installed globally so cannot run ng test ... from the command line. And I can't install it either as it could mess up with my existing codebase's Angular version. I am using JetBrains WebStorm IDE and in it you can just right click the spec file and run the test.

score -5 · Answer 15 · edited Nov 25 '21 at 14:52

-5

Works if you specify your spec file as parameter.

For example:

ng test foo.spec.ts

edited Nov 25 '21 at 14:52

Tomerikoo

18,379
16
47
61

answered Jun 06 '18 at 13:41

gustavomcastro

155
1
9

4

Can you specify which version are you using? Not working with 1.7.x – FrEaKmAn Jun 14 '18 at 17:42
4

It did not work as is for me either. But I modified it to work with the --main option before the path to the spec file. I used an absolute path with forward slashes. Have not tried a relative path. Using Angular 6. Not sure if it is the best solution, but it seems to work for me. – user2367418 Nov 02 '18 at 17:55

Running a single test file

15 Answers15

Visual Studio Code Extension

Why make it so hard?

Linked

Related