Web App Testing & Tools

Add Test Boilerplate to beforeEach

Miško Hevery

Miško Hevery

Qwik Creator (Previously Angular)
Web App Testing & Tools

Check out a free preview of the full Web App Testing & Tools course

The "Add Test Boilerplate to beforeEach" Lesson is part of the full, Web App Testing & Tools course featured in this preview video. Here's what you'd learn in this lesson:

Miško simplifies the tests by moving repeated code to the parent describe block. This allows multiple tests to use the same setup logic.

Preview
Close

Transcript from the "Add Test Boilerplate to beforeEach" Lesson

[00:00:00]
>> Now, the thing to kind of notice at this point is we now have repetition. And so it would be nice to kinda simplify this particular thing. So what would be nice if we took these mocks, all of these three things, and pulled them out to a setup.

[00:00:15]
So I'm gonna do just that. So now let's pull it out. So let's grab this code right here. And let's go to the correct level described. So this is gonna be probably useful for all of the API, for the Github IP and not just for Git repositories. Let's put it on top level.

[00:00:33]
And now we can't just leave it in here because this code doesn't execute over and over again. Instead we have something called beforeEach. So we're gonna split this, we will leave the type information here, and of course it's not gonna have to be let. So we can set up our mocks in here and assign it.

[00:01:18]
We probably wanna have a type, so it's gonna be mock of parameters of fetch, and that's a correct guess. You have to import the mock. This one is gonna be a mock of number of promise. Wow, autopilot is amazing. And wow, okay.
>> Last time you said that the params were completely wrong.

[00:01:42]
>> [LAUGH]
>> Yeah, sometimes it just does bad things.
>> It looked correct, but it was not correct.
>> Yeah, but like this one, it got it right. So now that we have this, what you can see is that we can now simplify our tests, right? Because our setup is done for us.

[00:02:00]
And so we can go back and we can delete this piece of code as well, right? And so now we should still have tests that run. Let's see, it looks like we broke something. Look where it imported it from, from wrong location. Okay, sanity has returned, okay. [COUGH] So we have all the tests working.

[00:02:24]
Okay, so the thing I wanted to kinda show off over here is how to do unit testing isolation, how you have the marks on both sides, how you can use a test runner, like B test, to do your testing. And more importantly, notice how we just got into this flow of I'm just coding and the tests are running always on the background, right?

[00:02:48]
When I usually do this, I take this window and I put it on the right-hand side when I have a bigger monitor so that I can just see the test running. We're having a pretty small monitor coz we wanted to stream it out on a UI. So it's kind of squished over here, but in the real world, you would have it on a side running and you just go and code and add features and go produce whatever you want.

[00:03:11]
You can debug this, put a debugger into it, and so on.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now