Unit tests leave behind <style> tag #41182
Description
🐞 bug report
Affected Package
I am not sure, but probably it's @angular/core/testing
Is this a regression?
Again, unsure. It appears not.
Description
Every time a unit test runs, when components are instantiated, Angular will add CSS styles to the <head> tag. It appears these are not being cleaned up after the test completes and the test fixture is destroyed. This leads to a huge pile of <style> tags being left behind, and significantly slows down tests, especially if some of your tests are (probably incorrectly) using innerText which causes a reflow.
A workaround can be applied (see below).
Maybe I am doing something silly?
🔬 Minimal Reproduction
I don't have a stackblitz for this.
🌍 Your Environment
Angular Version: 10.1
Anything else relevant?
Our app currently has 2600 tests. We run them in Chrome Headless. When I run the tests in a normal Chrome, and inspect the DOM tree, inside the iframe where Angular is loaded, I was able to see almost 2900 style tags accumulate in the <head> tag.
On my macbook, before the workaround is applied, the tests run in 2:18 ... after the workaround, they executed in 1:35.
Being completely transparent, I was not the first to observe this. Here's a screen shot from a Forbes (yes!!) article where I found the workaround:
