DEV Community

Unit Testing in Angular - To TestBed or NOT to TestBed

Jordan Powell on September 16, 2020

I recently started consulting for a new client (no names please). As I began to create a new feature and write unit tests I noticed several things....
Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen • Edited

Which version of Angular are you using in the system you saw the speed differences in? With or without Ivy? A big component testing (TestBed) optimization was introduced in Angular Ivy version 9.

We don't have to render the full DOM of every component. We can use shallow component tests where we don't render the child components, but instead focus on the DOM generated by a single component template.

Collapse
 
jordanpowell88 profile image
Jordan Powell

Yes. I did forget to mention this in my article but we are currently on 7 and therefore not able to take advantage of the benefits of that optimization in IVY.

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

That's sad. Angular 7 has been end of life for a while. Even version 8 will receive no more patches two months from now.

Definitely worth mentioning in your article that this might only apply to legacy versions of Angular using View Engine.

Thread Thread
 
jordanpowell88 profile image
Jordan Powell

Yes I am in the process of upgrading the app to 7. And yes I will work on adding that caveat to the article. I had it written down in my outline and then just completely forgot to actually add it into the article. I appreciate the feedback and the reminder!

Collapse
 
stealthmusic profile image
Jan Wedel

We are also on that same path. We were used to writing tests with TestBed and then started to refactor all of them to real unit test, putting more emphasis on integration tests with Cypress and backend mocks.

TestBed was just to slow and adding all modules for dependencies was really tedious.

It’s interesting though, that there is a speed up to be expected with Angular 9.

Collapse
 
jordanpowell88 profile image
Jordan Powell

Their is a noticeable speed improvement with IVY (version 9+). It is nice to have the option to use TestBed when you want to but the main point of the article was that I don’t believe it is necessary in almost all use cases and in the end isn’t then truly a unit test

Collapse
 
flamesoff profile image
Artem

Testing with TestBed is NOT unit, it's Integrational. It's a different level of testing.
And yes, after many years of development I came to conclusion that testing with the TestBed is a pure waste of time.
In the same time unit tests are complete opposite, unit tests are crucial, helpful and easy to maintain.

Collapse
 
martinspire profile image
Martin Spierings

I recently started in a team that is all-in on blackbox testing. So there's no component logic in my tests, just the DOM and everything you do is interacting with the DOM. This means that you need testbed, but that also means that for testing, you don't really care what happens in the controller because ultimately it doesn't matter. It does make it a bit more difficult to simply test certain functions but if it never modifies the DOM do you really need to have it in your component?

We also use NG-Spectator and NG-Mocks to do stubbing of children, services and what have ya which makes it a lot easier to write tests. I really hope the Angular team considers using these modules (or their logic) to upgrade Testbed at some point in the future because its mighty handy. I also prefer it over the use of TypeMoq (as its much easier to read imo).

Without testbed, as you demonstrated, your DOM could be anything and you aren't really testing components. Its great for testing services, but terrible to check whether what the user sees is what you developed. The HTML is still part of what makes angular tick and if you skip that part your tests aren't going to be reliable

Collapse
 
mrgrigri profile image
Michael Richins

At my work we've adopted TypeMoq with out the use of TestBed and it's been amazing.

Collapse
 
joellau profile image
Joel Lau • Edited

great article and interesting discussions in the comments!

does anybody have any thoughts / experiences on angular-testing-library?

Collapse
 
razorblade446 profile image
Frederic Yesid Peña Sánchez

I think is not accurate to say that TestBed is a waste of time, moreover when an Angular Component is strongly tied to HTML.

If you have logic in your component that does not need to interact with HTML, I would suggest that logic to go in a Service.

Also, a good separation in Dumb and Smart components will improve TestBed tests.