Angular unit tests are leaking styles

Question

In our project we have thousands of unit tests and they become slower and slower. I did debug it and found out that the CPU time is spent mostly on the rendering.

After some more debugging I found out that in the Jasmine test page DOM there are thousands of <style> tags which seems to be the core of the performance issue.

I have tried it on the empty ng new project. What I did was just to add some style to the AppComponent:

app.component.css:

.test { color: red; }

When I run the default unit tests (there are 3 pre-defined) using ng test and open the chrome console on the Jasmine test page the result is following - the style is there three times!:

While running thousands of tests the performance suffers a lot because of thousands of <style> tags.

Does anybody know how to make karma/angular to cleanup after each test?

I am using angular 6.1.1 and angular/cli 6.0.1

Answer 1

I think you hit the following bug: https://github.com/angular/angular/issues/31834

Adding the following line to a global afterEach really speeds up the test suite execution:

window.document.querySelectorAll("style").forEach((style: HTMLStyleElement) => style.remove());