Angular tests are considered a success, even when there is errors

Question

I have some tests on an angular application.

All tests are passing, when I run ng test and the browser launch here is the result:

And when I run ng test --browsers=ChromeHeadless --watch=false, it's still a success

Chrome Headless 108.0.5359.124 (Mac OS 10.15.7): Executed 136 of 136 SUCCESS (2.832 secs / 1.844 secs) TOTAL: 136 SUCCESS

But when I look at the logs I see some errors, that seems to not trigger a failure. Here is an example:

1. If 'p-skeleton' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.

I know that to fix this error I have to import the right module in the spec file.

But the problem here is that if I don't look at the logs I won't see the errors, and I think it would be a good practice to fix that kind of error. So the first step would be to be warned that there is an error.

The best way that I can think of is to make the test fail on error, so that anyone running the tests is forced to fix the errors to make all tests pass.

Here is my karma.conf.js and I can't find a configuration line that make this.

// Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma') ], client: { jasmine: { // you can add configuration options for Jasmine here // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` random: false, }, clearContext: false // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { suppressAll: true // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, './coverage/project'), subdir: '.', reporters: [ {type: 'html'}, {type: 'text-summary'} ] }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, restartOnFileChange: true }); };

So is it possible to make the tests fail on error ? And why it's not failing by default ?

The log will display warnings and errors that are not necessarily failed assertions. It can be entertaining reading the log of a testsuite containing a lot of test of error scenarios writing a lot of warnings (like "you should never reach this code" warnings). you should watch your linter for fixing those errors — JoSSte
– JoSSte, Commented Dec 19, 2022 at 10:10

Some random IT boy · Accepted Answer · 2022-12-19 10:18:09Z

These are due to missing declarations during your configuration on your configureTestModule call.

Consider adding the PSkeletonComponent to the declarations property when calling

TestBed.configureTestingModule({…})

And the tests aren't failing because whatever piece of javascript that you're testing is properly working. It's just that the rendering engine is failing to link the mentioned components because you did not add them to the testing module.

If you're using Angular 14 or higher you can try this out

// enabling the feature globally on the test.ts file getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { errorOnUnknownElements: true, errorOnUnknownProperties: true } );

// Enabling the feature per test suite TestBed.configureTestingModule({ declarations: [AppComponent], errorOnUnknownElements: true, errorOnUnknownProperties: false })

In case you're using Angular 13 or lower what people have been doing is "monkey-patching" the console.error method on the beforeEach call of their tests.

Replacing the original function with a call to fail from karma.

beforeEach(() => { console.error = (...args) => fail(...args) })

I understand how to fix the error, but is it possible to make the test fails for the rendering to make sure all the declarations / imports a done in the spec file ?

Collectives™ on Stack Overflow

Angular tests are considered a success, even when there is errors

1 Answer 1

2 Comments

Hot Network Questions