JavaScript Testing Practices and Principles

Jest Testing Framework

Kent C. Dodds

Kent C. Dodds

Professional Trainer
JavaScript Testing Practices and Principles

Check out a free preview of the full JavaScript Testing Practices and Principles course

The "Jest Testing Framework" Lesson is part of the full, JavaScript Testing Practices and Principles course featured in this preview video. Here's what you'd learn in this lesson:

Kent provides an overview of Jest's assertion methods.

Preview
Close

Transcript from the "Jest Testing Framework" Lesson

[00:00:00]
>> Kent C. Dodds: Now we're going to talk about the Jest Testing Framework, just a little bit, I'll give you a brief intro to it. So that as we go through some exercises, you know what assertions are available to you and things. And so, if you go into the other directory, just expect this test directory with the double underscores, and then the expect assertion is js.file.

[00:00:24]
Then you can take a look at these. And I'm gonna go ahead and run a script. You can run this if you want to. Let me see, it's, yeah, NPM run test:expect. You'll wanna do this in the root directory. Yeah, you don't have to run this if you don't want to, you're not gonna be changing any files.

[00:00:46]
And then we'll explore this a little bit later. But press A to run all those tests. Like I said, you're not really gonna be making any changes there. So this is just a quick intro to Jest so you're familiar with what assertions are available. So you have this 2B assertion.

[00:01:08]
You wrote this, so you know what this is all about. It's similar to triple equals, so you can expect one to be one, you can expect true to be true. And then on any of these assertions you can negate the assertion by adding a not in front of it.

[00:01:21]
So expect this object not to be this other object. And this is actually a pretty critical point, so expect is using something similar to triple equals, it's actually object dot is. But two objects even though they may look the same and they have all the same properties, they're not actually equal.

[00:01:41]
And so keep that in mind when you're using toBe, we want to use this to compare references to the same object. Or the like primitive values, like a one and true or a string.
>> Kent C. Dodds: Okay, and then we have two equal. So if you do have two objects that look similar to each other, or that look the same but not in the same reference this is where two equal comes in handy.

[00:02:06]
It's similar to low dash is equal if you're familiar with that. So the subject in our actual here are visually identical references to totally different objects. We also have this array as well and oops, and these two things are also visually identical. And so both of these will pass a toEqual check.

[00:02:34]
>> Kent C. Dodds: So we'll use that one a fair amount. Too match object is similar to toEqual, Except it will do a sub object match. So so long as the subject has at least the things that the actual has as the expected. That should be expected. Anyway, so long as this has at least all the same properties as this one, then that will pass the assertion.

[00:03:01]
So to match object is handy. If we added, like, a f bar then that will fail. And actually this is one of the nice things about Jest assertions, is they'll say hey, I expected it, and now to match this and here's the difference. So that error message is really nice.

[00:03:21]
Thank you, Jest, cool.
>> Kent C. Dodds: So then we have, we move on to mock functions. If you want a fullest of assertions, there's a link at the top of this file here. Find the fullest of assertions here, so you can check out. It's not ginormous but it is significant in link.

[00:03:45]
So you probably just keep that open to see the docs as you're working through things, can be pretty handy. Okay, so we're gonna talk about mock in a little bit later. But they are simply function that keep track of how they are called, and what they are called with.

[00:04:09]
And so we can create these mock functions with Jest function API, and then when it is called, we can use this assertion to times with the number of times that it's supposed to be called. And then two have been called with is another insertion, we're calling it abc and then this object so we can assert that, that 's what it was called with.

[00:04:33]
And yeah, each argument uses toBe and that's why we're able to use a totally different reference or a totally different object here. There's also to be greater than, to be falsey or truthy, you may use that in some places in the workshop exercises. And then this is a pretty handy feature of Jest as while, I think this is second to last thing I wanna show.

[00:05:00]
For toEqual to match object and to have been called with, you can have them match a schema. I think Jest doc referred to this as asymmetrical matches, which I'm not sure I understand what that means, but in any case we have this birthday object. And then we can define that as kind of this schema object, so the day, I don't care what the day is, it just needs to be a number, and I don't care what the month is, it just needs to be a number, and the year.

[00:05:28]
And then the display property, or the meta needs to be an object, and that object should have a display property that is a string that contains 1988. That's the only thing I care about in this test, for example. And there's also array containing, object containing, a whole bunch of others.

[00:05:48]
They're all documented right here. And so then you can use toEqual to match objects, or if it's a mock function to have been called with. So this can be really handy, especially if we're dealing with generated data or something like that. When you say I don't really care what the value is specifically, it needs to be of this type or it needs to be a string continuing this.

[00:06:12]
>> Kent C. Dodds: Okay, then one last thing on this mock functions thing, and then we'll move on to the writing unit test. So a mock function has a property called mock, and that has some information about that mock function. One of those pieces of information is calls property. And that's an array of every single time it was called, that's array of the arguments for every time it was called.

[00:06:39]
So here this time was called one time with these arguments. And so this array on first call is gonna be an array of these arguments. And then if it was called a second time, then, or sorry, this is the second argument. So we've got the first argument, second argument, and we can make assertions on those.

[00:06:59]
So sometimes if you need a much more specific assertion on mock functions then you can pull out those calls yourself. So you may, this might be a pretty good thing to reference later on in the workshop when we start getting into some of these assertions. Later on we'll cover mock functions inspires in greater depth.

[00:07:20]
And then also may be get to use snapshots a little bit later. And we'll talk about those later.

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