DEV Community

Discussion on: How to Speed Up Angular Tests

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited on

The worst low performance issue occurs when components have external stylesheet and template files. For every test case, the compiler has to get access to, open and read two files per component, before it can even compile the component. So either use inline templates and styles or use the hack of preventing the Angular testing module from resetting between test cases.

Apparently, Ivy should make testing faster, but I haven't seen any facts about this yet.

If we just prevent the Angular testing module from resetting in beforeEach, we take care of the worst performance issue in tests and we don't have to add all declarables and dependencies to a single Angular testing module configuration which is hard to maintain and does not work well for all tests.

I used the hack with good results back in Angular version 5. I haven't tried it since then as I favor not using the TestBed at all for a lot of tests. One big caveat is that services and other dependencies are reused between test cases. So stateful service instances are not reset.

Collapse
aumayeung profile image
John Au-Yeung Author

Pretty much every Angular component have these files.

Honestly, It's like the Angular team didn't test it at all with lots of components in a module.

Are there any alternatives to that doesn't involve adding recreating the module in every file?

It's not only the speed, but having to recreate the module code for every test file is also a pain.

Collapse
layzee profile image
Lars Gyrup Brink Nielsen

Oh, you mean having to setup all the needed Angular module imports and declarations? Are you aware of SCAMs?

One advantage is that you can often just import a component's SCAM to test it. It's so unexpectedly easy that Spectator had to put in a special option to undo some of its normal affordances to make component tests easier to set up.

Thread Thread
aumayeung profile image
John Au-Yeung Author

I'm not aware of that. Too late for existing apps probably.

But looks useful for new apps.

I already refactored the TestBed to its own function so it can be imported and run anywhere, that's how I solved it.

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen

Thanks. Of course, there's also the option to use shallow component tests, where we include no or only some view child components in our tests:
angular.io/guide/testing#nested-co...

Thread Thread
aumayeung profile image
John Au-Yeung Author

But we still have to put dependencies in declarations right?

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen

Not with shallow components tests using NO_ERRORS_SCHEMA.

Thread Thread
aumayeung profile image
John Au-Yeung Author

That's great. It's annoying to have to put everything in the TestBed module.

Anything in Angular is more complex than the other frameworks.

Collapse
joerter profile image
John Oerter • Edited on

Do you know if using some of the testing libraries such as angular-testing-library or spectator help with this issue? I haven't used either of them, but am beginning to experiment. Angular Testing Library at least looks like it may expose components in a different way that gets around this issue.

I too have stopped using the TestBed for most tests and simply test components by treating them as simple classes and asserting against their public properties, but am beginning to look at these other libraries as an easier and quicker way to test against the DOM

Collapse
layzee profile image
Lars Gyrup Brink Nielsen • Edited on

Both of them wrap TestBed so they will have exactly the same problems. We did discuss adding ng-bullet to Spectator, but decided to wait for Ivy.

Thread Thread
zaky7 profile image
Zakir

I have seen even after Ivy, ng-bullet is still helps in speed up the tests. Is the discussion still open?

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen

I'm not sure. You're welcome to file an issue to Spectator.

Collapse
layzee profile image
Lars Gyrup Brink Nielsen

Details on how Ivy will improve the performance issues discussed in this thread:
github.com/angular/angular/issues/...