Testing Libraries

[00:00:00]
>> When it comes to testing, I want to start off with the something called the Pareto Principle. And so, the reason this is an important concept that we're going to leverage sort of going through as we talk about testing. For those who don't know what the Pareto principle is, you might also know it as the 80-20 rule.

[00:00:18]
And the way it works, the principle behind it is that, 20% of the effort often yields to 80% of the results. And so this is traditionally spoken about in sales from like 20% of your clients represents 80% of your sales. And so, the reason why this is a principle I'd like to drill in, when it comes to making decisions for your application, is that, a lot of times we focus on the other 80%.

[00:00:46]
That doesn't yield like the 80% that use the 20% of results. When in reality we really wanna focus on the 20% of effort and focus the results in that 80%. And so, when it comes to testing, we're gonna refer to this later but I want to at least preference that In case anyone's not familiar with it.

[00:01:05]
Okay, so, when it comes to testing, traditionally, we know them, like the model testing is explained as like unit testing, integration testing, and then end to end testing. And so, as a quick recap, when it comes to unit testing, what are we talking about? Well, from a tooling perspective, typically this is done with either Jest or Mocha.

[00:01:26]
As far as the thing that's most popular, amongest view applications, Jess is typically the way that people use to test their applications. And so if you're choosing basically your next tool definitely recommend starting with just there's a lot from a developer experience perspective, that's really nice. From like, a fairly fast runtime, as well as like good error message handling.

[00:01:45]
So, Jest is basically the proverbial tool, for a view application so far. But, you probably thinking like what about Vue Test Utils? Isn't that also for unit testing? And so, if you check out the V3 Doc's, there is an updated testing guide, currently view test utils is designed as a library to really sort of abstract the way some of the common functionality that we would need to test view apps.

[00:02:10]
But at this point it's more or less recommended as like, an advanced way to test like, sort of like, libraries, plugins like, libraries and, sorry, let me try that again. And so, if you test utils, is useful at the sort of the lower level testing and what most of us really want actually at the end of the day is when it comes to unit testing is actually component level testing.

[00:02:32]
We wanna go through and we want to like render things out. We wanna check things out, we wanna click things, we wanna see what's returning. And so, right now there is a sort of a shift in the testing sort of ecosystem where component testing is becoming more of a thing.

[00:02:45]
And so, one of the recommendations by the testing team is actually check out this testing library. I believe it's by Kent C Dodds. And so, in there, there's actually a view library, right? For working with view apps. And so, they've done a lot of good work as far as abstracting a lot of common test scenarios and like making it easy to work with.

[00:03:05]
And so the documentation there seems pretty solid. So, if you're looking for this level of testing and you're starting to wanna beef out that piece, definitely look into the testing library. But I also want to go ahead and make a special shout out to Cypress who is also working on their own component testing as well.

[00:03:23]
And so, one of the team members on the testing team, Jessica Sachs, is working on it, along with some other view team members as well. And so, in there, they actually like there's a whole channel regarding like trying to figure out how to create good component testing, using the Cypress ecosystem.

[00:03:38]
And so, keep an eye on both of those projects, as you're playing around and seeing, what works best for your application. As far as some best practices for writing unit tests, couple of things to keep in mind is that, 1, don't test that Vue works. So believe it or not, this is actually fairly common.

[00:03:58]
Where people will, for example, the writing unit tests in a way that. When the component loads, they'll be like check that data exists. Or check that computed exists, like, view already comes with its own set of tests to make sure that everything works. So, your goal then is to focus on the things that impact the end result rather than testing the internals of like did this load at this particular time.

[00:04:21]
Simply like if you're trying to make sure that like a property, like when you click on something, it changes test for that, but don't test that like that the state loads a certain way and changes. So, [LAUGH] you can trust view that view is testing its internals correctly is basically the point here.

[00:04:39]
And when you're using these testing libraries, a lot of them have like there's deep rendering and then there's shallow rendering. And so, the general recommendation is to primarily stick with shallow rendering. So when it comes to shallow rendering, you can imagine that if you have a parent component that has a lot of children underneath.

[00:04:56]
Like when you have deep rendering what it does is the testing framework will actually like try to render every single thing that goes under it. And so, instead like most of the time we're trying to test is like whether the component like certain things are called, and if you need to test something at the child level, then you should have units.

[00:05:13]
And so, this is why the primary recommendation is to stick with shallow rendering, that basically ensures that you focus on just the component you care about. And then, because otherwise, if you have a common component that is shared between multiple tests, and it's not necessarily related to the implementation of how that particular component works.

[00:05:32]
You end up breaking a lot of tests inadvertently with if you use something that if you don't use shallow rendering, so these are the the main things to keep in mind when you're writing these unit tests. And then, the other thing to keep in mind and this is less of a unit test and more of a best practices thing.

[00:05:49]
Is that, to actually build those unit tests directly into like when you're generating components, so other people timeout factories and those sort of things. In Chris Fritz's view enterprise boilerplate, you'll notice that he uses hydrogen in order to like basically create new components. That then automatically scaffold out not only the component, but it'll scaffold out basically a basic unit test.

[00:06:11]
That basically checks like, does this component render correctly. And the reason why this is important is because, as we know, testing is a notoriously difficult topic that most people want to do, but, ultimately don't often have time for. And so, the more you can lower those barriers of like how to get your test setup and like what the syntax is.

[00:06:30]
The better it is like you'll get, get basically higher participation as far as fighting those unit tests. And so by building your unit tests into generators, you are trying to basically like encourage your developers to keep on that path of writing tests for your components.