JavaScript Testing Practices and Principles

Coding a 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 "Coding a 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:

After coding a simple testing framework from scratch in pure JavaScript, Kent introduces Jest as an example of how a testing framework can increase the productivity of the user.

Preview
Close

Transcript from the "Coding a Testing Framework" Lesson

[00:00:00]
>> Kent C. Dodds: All right, let's write our testing framework. So if I come down here, I'll just write it above the expect here. We'll have a function called test that accepts a title and a callback. And because we wanna be able to run all of our tests we're gonna put this in a tri-catch so that our code can continue even if the call-back throws an error.

[00:00:23]
So we'll call the call-back, and then we'll just log the error. We'll say console error. And with that I want to do a little bit more with the title, but we could package up our stuff into little tests to start, so we'll say test. Sum adds numbers. We'll move these into here.

[00:00:49]
And then test subtract, subtracts numbers?
>> Kent C. Dodds: This is so not contrived. And then we'll, I'm actually gonna scope all these variables down. I like to be able to look right at the test. I know exactly what's going on inside of that test without having to look at where variables were declared and what values those things might have at this point in time.

[00:01:16]
So keeping things isolated within that call-back is something that I try to accomplish. Okay, so now if I run node 3.todo we shouldn't have anything different from before. So, [COUGH] let's go ahead and make our error message a little bit more useful. But, actually, sorry, one difference we do have from before is if I were to break this subtract module,

[00:01:49]
>> Kent C. Dodds: Then I'm gonna get both errors. So that's good. Now we can run all of our tests instead of just one. So hooray, hooray. But let's go ahead and we'll, if it's not broken then we don't see that, it's passing. So let's go ahead and a console.log after the callback, and if it's passing then it's gonna have a, we'll add a little check mark that says title right next to it.

[00:02:19]
If it's not, then we'll add a X and I got that in my clipboard here.
>> Kent C. Dodds: And with that we can run our test again, and we'll see that sum apparently fails and subtract passes. And that's our first testing framework. So this is a pretty simple framework. It's not really much of a framework at all honestly but it encapsulates the basic ideas behind testing assertion libraries and frameworks.

[00:02:57]
So the key takeaways here are a test is something that throws an error if there is a bug, and a good one is one that helps you identify where that bug lives and how to fix it. A testing framework allows you to have many tests and encapsulate those and provide even better error messages.

[00:03:24]
The testing framework we're going to be using today is Jest, and its API is exactly like this. And so you don't have to do this one, but if you look at 4.js we just remove all of our custom code and leave everything else as it was, and that allows us to use Jest.

[00:03:44]
So this is what a real testing framework will do for you. It gives you a summary of the pass and fail status of the test. It will give you a really nice error message here. The stack trace before was this giant huge thing where most of it wasn't relevant to our test.

[00:04:02]
But the stack trace now will just show us the stuff that is actually relevant for the test. If the failure actually happened within our source code, like we're trying to access a property or something. Then this becomes really, really useful because it'll point directly to where that failure occurred and give us this code frame around that.

[00:04:21]
So, this isn't an advertisement for Jest even though it kind of is because it's amazing. But this is more an idea of when you're trying to pick a testing framework or when you're writing your test. You should think a lot about the error message that people are going to see when things go wrong.

[00:04:41]
And so, that's why, with Jest creating custom expect to matters, so custom functions that you can call and you can extend. Expect to have some of those to have a little bit nicer error message, more specific to what you're trying to write, that can be really useful. But the error message in tests is really paramount to being about to fix bugs quickly and know what the problem is right away so you can fix it.

[00:05:11]
So that is what a test is. Did anybody expect to write a testing framework this morning? [LAUGH] It's a really simple one, but [COUGH] that's really what a testing framework is all about. Hopefully that, in some small way demystified testing for you a little bit.

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