Search code examples
angularkarma-jasmineangular-test

Can't see my component in Tests because of Angular Karma Jasmine test results

The Test result looks something like this: enter image description here

And the component is loaded below that. While developing tests i don't need this result overview and i would like to see my component without scrolling past 280 (and more to come) test results. I already found that this results screen is made by Karma Jasmine HTMl Reporter and you can pass options to it in the file "karma.conf.js" linked in angular.json at architect.test.karmaConfig.

I tried adding to karma.conf.js:

jasmineHtmlReporter: {
  hideDisabled: true
}

But that did not end up hiding the other tests when i focus one.

Solution

  • I found that when executing single tests using "fdescribe()" instead of "describe()" or "fit()" instead of "it('should...')" still causes all test results to be shown.

    In Angular you can specify the spec file with.

    ng test --include **/[test-file-name].spec.ts

    This causes the result to only be shown for the specified spec file.

    I now added the following command to package.json / scripts to run single specs with

    "single-test": "ng test --source-map=false --include **/$npm_config_spec*.spec.ts"

> npm run single-test --spec=[part-of-filename-without-ending]