Testing React Applications with Jest

Jest is one of the best tools available for testing React applications. This course will teach you basic and intermediate Jest testing techniques, including running tests, snapshot testing, testing React components, and module mocking.
Course info
Rating
(70)
Level
Intermediate
Updated
May 11, 2018
Duration
3h 36m
Table of contents
Course Overview
Course Introduction
Understanding Testing
Introduction to Jest
Test Running with Jest
Mocking Functions and Modules
Snapshot Testing
Testing Components
Advanced Jest Matchers
Conclusion
Description
Course info
Rating
(70)
Level
Intermediate
Updated
May 11, 2018
Duration
3h 36m
Description

At the heart of building durable and reliable React applications is a solid understanding of testing, starting with Jest. In this course, Testing React Applications with Jest, you will learn everything you need to do to create solid tests for your React components and applications. First, you’ll learn how to install Jest on any machine, run tests with it via the command line, and integrate it with any Node project. Next, you’ll dive into the various testing techniques, including globals, mocking, and snapshot testing that you can use to make your tests more readable and efficient. Finally, you'll explore how to use all these techniques to test React components and the applications they belong to. When you’re finished with this course, you’ll be able to immediately start writing tests for your React applications, discuss testing strategies and techniques in the workplace, and facilitate development by setting up and configuring Jest.

About the author
About the author

Daniel Stern is a freelance web developer from Toronto, Ontario who specializes in Angular, ES6, TypeScript and React. His work has been featured in CSS Weekly, JavaScript Weekly and at Full Stack Conf in England.

More from the author
Vue.js: Big Picture
Beginner
1h 6m
Aug 31, 2018
Isomorphic React
Intermediate
2h 44m
Jan 11, 2018
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
React applications are the preferred way of delivering content to clients and customers over the web, but without good testing, knowing if your application works as expected is a matter of guessing and luck. In my brand-new course, Testing React Applications with Jest, you'll learn how to test React applications from the ground up. We'll learn how to install Jest and integrate it with a new or existing node application. We'll learn about running tests with Jest, but we'll also learn advanced techniques. You'll learn how to scaffold tests using mocks, and how to create automatic tests with snapshots. Finally, we'll learn how to test fully-featured React components using all the techniques I've just mentioned and more. By the end of this course, you'll have written and learned to manage multiple kinds of tests by coding along at home during the demonstration portions of this course. Full-course files are available for you to study and to use in your own projects. Before starting this course, you should be highly familiar with React applications. If you're not already familiar with React, I recommend my recent course Isomorphic React, which is available here at Pluralsight. If you're already a senior React developer, feel free to jump right in. Don't rely on guess work and random chance when building applications that are reliable, durable, and progressive. Master React testing with Jest today, and enter a world of testing opportunities.

Course Introduction
Hello and welcome as we kick off this course, Testing React Applications with Jest. I'm Daniel Stern at @danieljackstern on Twitter, and in this clip, I'm going to introduce this course and tell you a little bit about it. So this course is a completely revised version of a different course by the same name that was released in 2016. Now, this new course consists of 100% new and updated content. Almost nothing has been reused. And everything about this course has been designed to fit in with the modern web development ecosystem that exists today. In that spirit, we've grabbed the latest versions of all the libraries we'll be using--React, Jest, and more. In addition, we've carefully noted your suggestions from the previous course, and this one has been built to exceed the expectations of any Jest learner. In the next clip, we'll be discussing the technical aspects of this course, including the demo project.

Understanding Testing
Welcome to This module entitled Understanding Testing Concepts. Over the following series of clips, we'll be learning about all the ideas and techniques that are necessary to understand testing as a whole. These ideas do apply to Jest in that by knowing them better, you'll be able to use Jest better, but they also apply to a wide variety of other libraries and almost all test-related applications. As with any laborious undertaking, it's good to understand why we're doing something before we do it. Hence, why testing? What's the purpose? The first purpose of testing is that it prevents regression. So regression, which we'll be talking lots about, is basically a phenomenon where your website without you wanting it to goes back to a previous state that is worse than your current state. In other words, it stops working. Next, testing provides objective success criteria. By writing, for example, unit tests in advance and then making an application that fits into them, you can objectively say that the application has succeeded once all unit tests pass. Finally, anyone who's built a large application will know that a really big program with many different components and parts quickly grows beyond the scope of understanding for any single human being. That means to build a huge project that is beyond your own individual understanding or the understanding of a senior developer, you need more sophisticated tools to do so. Testing is one of those tools as it allows you to ensure the functionality of an almost unlimited number of components. So I hope I've piqued your interested with all these great reasons why you'd want to test your application. In the next clip, we'll get down into the nitty-gritty by asking, What exactly are tests?

Introduction to Jest
Hello and welcome to this module entitled Introduction to Jest. In this module, we'll learn all the information about Jest that you need to know to be an effective Jest developer. As William Shakespeare once said, "In Jest, there is truth. " Will you find the truth of whether or not your application is functioning correctly by using Jest? I certainly hope so, but let's find out. So, what is Jest? I'm sure you already have a pretty good idea of what it is, but what is it exactly? So Jest is a JavaScript library installed via npm or Yarn and run via the command line. Jest fits into a broader category of utilities known as test runners. It's similar to other populate test runners like Jasmine, but it has a lot of extra useful features. And Jest is a tool that's made by a team of excellent developers that include many members of the React team. So in your mind, you may correctly already have Jest and React associated. And this is the main reason why. It's that they're both built by teams that largely overlap. But, of course, in the world of web development, there're many tools, and we need to understand where Jest fits in among all of them. In the next clip, we'll do just that.

Test Running with Jest
In this module entitled Fundamentals of Jest Testing, we'll be applying the basics of Jest from getting it installed to writing a few tests. As everyone has said at one point or another, "It will probably work. " And if you've ever said this, you know that these words inevitably come before something does not work. So how do we make sure it'll work for sure? We're going to begin this chapter by, of course, installing Jest. Jest is installed via npm like a lot of other libraries. You can also install it with Yarn and some other tools, though we won't be doing that here. Now the version of Jest that you install locally as in in the Node module's folder in your project should determine what version of Jest is used. But in practice when you use the CLI, you don't know whether it will call the local installation or a global installation if you have one. It's just not consistent across every machine. And as we'll see in the next clip, after we install it, the installation will make changes to package. json, which our continuous integration software actually uses to run Jest itself. So in the next clip, we'll be getting Jest installed. Make sure you have your text editor ready, and let's jump right into the first code-along demo of this course.

Mocking Functions and Modules
Welcome to this module entitled Understanding Jest Mocks. Mocking is a big part of what Jest does. So unless you understand it, you can't get the most out of your Jest setup. As Laurence Olivier said, We ape, we mimic, and we mock. " I don't know how much aping we're going to do, but in the sense that they both involve mocking, Jest is a lot like the theater. So when we mock something, we're necessarily going to have to do a bit more work, so the question is, Why should we mock something in the first place? Are there any advantages to doing so? So, first of all, mocking reduces the number of dependencies, the number of related files that have to be loaded and parsed when tests are run. So using lots of mocks just results in faster test execution. It only saves a little bit of time every time, but over thousands of repetitions, it can really add up. Additionally, if your components aren't built from the beginning with testing in mind, they can easily be built in such a way that calls to actual APIs, maybe even vendors, are hardcoded in and hard to avoid when writing tests. But by mocking their dependent modules, we can prevent these side effects without even needing to change the file itself. Finally, we may have in mind a very specific test for a component that, say, gets its state from many other different components. To set up this perfect scenario to get the component in the state where we want to do our test, we can use mocks to get the data that we need to the component. So now we know the Why. In the next clip, we'll discuss What. What is a mock?

Snapshot Testing
Hello and welcome to this module titled Snapshot Testing. I am simply so excited to jump in to this module. Snapshot testing is just such an important part of Jest. I'm sure that coming into this course, it's one of the parts about Jest that you've heard about and wanted most to learn about. Your enthusiasm will soon be rewarded as we're about to see how simple and useful snapshot testing is. "A good snapshot stops a moment from running away, " - Eudora Welty. This quote quoted from a person who ostensibly did not know much about code or tests really summarizes the principles behind snapshot testing very well. In theory, we're talking about a moment in time when your component or the component worked. If you use snapshot tests properly, you won't find yourself in a situation where your component suddenly doesn't work. But let us pause to consider an important question, What is a snapshot? So the actual code representation of a snapshot is a JSON file, and this JSON basically contains a record of what your component looked like when the snapshot was made. During tests, Jest compares the contents of this JSON file to what is actually output by the component during the test. If everything matches, the test passes. Otherwise, it fails. One interesting note is that these test snapshot files are actually committed to the repository along with your actual modules, tests, and files. We'll discuss the advantages and disadvantages of this unique feature in a later clip. In the next clip, we'll discuss how snapshot testing works.