Update: Jun 2020: They are not totally dead, but only good for testing whether or not a component creates. Everything else is much better tested using Cypress.io
This is my umpteenth time trying to check in code, but I'm being delayed all because of nonsense like these errors below.
Even when I fix the immediate error, there are other layers of errors to come. Each one with ridiculous vague messages.
Using the native Angular Karma/Jasmine test schematics are painful and cost major amounts of time. It requires us to discover imports for every dependency in your component; even those that are 3,4,5 layers deep.
CheckboxComponent > should create
Error: Illegal state: Could not load the summary for directive CheckboxComponent.
error properties: Object({ ngSyntaxError: true })
Error: Illegal state: Could not load the summary for directive CheckboxComponent.
at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:2430:1)
at CompileMetadataResolver.getDirectiveSummary (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:18535:1)
at JitCompiler.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:25979:1)
at CompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js:162:1)
at TestingCompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm5/testing.js:110:1)
at TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1905:1)
at Function.TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1601:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/systemsettings/checkbox/checkbox.component.spec.ts:30:25)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
Now if I spend time on this and the myriad of other similar errors I'm likely to find (as I just added 9 new Angular components), I'm likely to lose a day or two.
Is the Time worth it?
The amount of effort put into Karma and Jasmine may not pay off, and here's why. Each component can only be tested half-way. This is because all outbound/inbound HTML calls will not work due to how Karma works. To acheive some level of depth in the test we need to create lots of mockobjects, spies and spend too much time debugging why things don't work.
Cypress
Cypress may not be a unit level testing tool, but with right planning it can cover a lot of ground (at least as much as Karma and Jasmine for sure). It has the ability to intercept and inject content in both outbound and inbound HTML streams. In short it is everything Selenium is and more. This means that Selenium and all derivatives such as Protractor are inferior.
Puppet
Honorable mention goes to Puppeteer
As of today, for me, I'm declaring Karma and Jasmine a toxic environment. I don't want to manually find and import dependencies. It's dead due to technical debt and newer tools.
Upate
The Angular-Testing-Library vastly improves this problem. Check out article 2 in this series.
JWP2020
Top comments (6)
Have you given
angular-testing-librarya try? You can use it with Karma/Jasmine or JestWow, it's exactly the reason why I was looking into Cypress, I wanted all the rendering to be done by the application, not the test component. Thanks... Looks like a keeper.
Awesome, can't wait to read it!
I remember trying to test my angular components, and i was starting my web dev journey, 3yrs back. I know how difficult it was and even after multiple attempts i failed miserably It was not at all intuitive and consumes lot of time and gave me lot of stress. I even developed inferiority complex, that i am not capable enough. Fast forward to today, I am very proficient with angular and also have mentored 1000+. But still not comfortable with testing.
This blog is such a relief that i was not the only one who hated the way testing is done in Angular. However I just discovered testing-llibrary and it looks intuitive to implement. Thanks for the blog.
Sorry, but i might have a weird question, but how can i do unit testing without zone.js in the project. is it possible to achieve with karma and jasmine?