Component Testing Overview

[00:00:00]
>> Let's talk a little bit about component testing. So, component testing is that kind of next level up from the hierarchy from unit testing, right? Unit testing's a breez easy call function. Did you get what you expected to get? That works, and component testing is the next phase up from there, which is run code.

[00:00:23]
But for coding, you can't just call as a function. Write code that has one very specific side effect, right? Technically, I guess React functions or React components are these days functions, and I'm sure you could call them but good luck testing on click handler. You know what I mean, right?

[00:00:53]
For those kind of more important pieces, could unit test a React component? Yes. Should you? Probably not. Somebody's gonna have an important use case, and yes, then do it. But for the most part, we're trying to say, hey, I am willing to take on some additional complexity, and what I would like in return for that additional complexity is something a little closer to the real world usage of this component.

[00:01:24]
So yes, you could unit test it. But you are being like, I would like to very complicated do that React, create element dance and all those things. What we really wanna do is we wanna see, hey, is this button disabled? I did these DOM changes work the way I wanted them to?

[00:01:42]
If it is make sure the password certain length before you enable the submit button, right? Generally speaking, you are going to need to hand it to react dom.render. That's not the name of it anymore. createRoot. And actually be able to use these things. Now, the true other end of the spectrum as we saw before, was that kinda integration end-to-end testing where build the thing, fired up in a browser, click the buttons.

[00:02:18]
That is the truest version of that, but you do have to download said browsers, start up said browsers, build asset load into page, not as fast as a unit test. Component tests seek to get you somewhere in the middle. I am not, I think if I was, for instance, building a design system, right, I think that I would use a lot of component tests.

[00:02:52]
Even there are ways to integrate your testing with storybooks, stuff along those lines. There's a lot of use cases if you wanna get a lot of the functionality of individual pieces, right? Insofar that I work on open source project where we are kind of eventually gonna have an extensible UI and the ability to have plugins and stuff like that, we will probably take pieces of UI and make it into a design system.

[00:03:17]
At which point like yeah, that was lightning fast run through them all, make total sense. However, we should go through, we should look at this. You might decide yes, this hits the value prop here is amazing for the things that I'm working on. Awesome. I have worked on applications where our component testing was, cuz we had a lot of that Cypress tests and unit test coverage and the value add just wasn't there, right?

[00:03:46]
The goal here is as we think about these enterprise UI apps or development is we have an arsenal of tools that is useful for the various ways in which the apps we work on are weird, right? In this course, we have left the this is what you should do all the time area of the world.

[00:04:08]
Yeah, you should have tests, but that's news flash for nobody. Here's a set of very specialized tooling that you can use to solve whatever problem that you have, right? Maybe the act of spinning up, maybe you're inside of a much larger application, something, something microfinance. And even spinning it up in Cypress or Playwright is like untenable.

[00:04:38]
Maybe you just have a really, really, really complicated form and having to spin up the entire app with all of its dependencies and mock out everything so that you can test all the form validation and whether or not certain things appear in certain states is just not worth it for you.

[00:04:51]
And too much of a hassle, then component testing is great, right, and you should totally do it. And if you have a thing where it's very easy to spin up everything and point a browser at it, you might not use it. Those are both really, really, really reasonable takes, and you have both at your disposal.