Mastering React Testing with Jest

Take testing React applications to the next level with Jest, the automatic mocking test framework. Using a variety of examples, this course will cover everything from installing Jest, to running and writing tests, to dependency management, and asynchronous testing.
Course info
Rating
(110)
Level
Intermediate
Updated
Mar 3, 2016
Duration
1h 59m
Table of contents
Course Overview
Introduction to Testing React Applications with Jest
An In-depth Look at the Jest API
Scaffolding the App
Implementing Basic Tests for a React Application with Jest
Advanced React Testing with Jest
Conclusion to React Testing with Jest
Description
Course info
Rating
(110)
Level
Intermediate
Updated
Mar 3, 2016
Duration
1h 59m
Description

Testing web applications is one of the most important parts of the development process and Jest, the testing framework from the makers of React, is one of the newest and most powerful tools for doing so. In this course, we'll fully implement a suite Jest tests. The course will begin with a detailed overview of the Jest API and several hands on examples demonstrating how it works. Following that, we'll put together a full React application and then test a variety of its components using Jest and React Test Tools. Successful students of this course will be able to understand and apply the concepts of dependency mocking, testing Node modules, and testing asynchronous functionality.

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
31 Aug 2018
Testing React Applications with Jest
Intermediate
3h 36m
11 May 2018
Isomorphic React
Intermediate
2h 44m
11 Jan 2018
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, I'm Daniel Stern, and I'd like to tell you about my new course, Mastering Testing React Applications with Jest. Testing is one of the most important parts of any web application. Without tests, you can't be certain that your application runs correctly. In this course, I'm very excited to be presenting Jest, which is a new and extremely powerful testing framework. In this course, we'll be taking a thorough look the Jest API. We'll be running Jest in a few simple examples, and we'll put together an entire application in React, Express, and Node that we will use Jest to test. By taking this course, you'll gain a strong understanding of not just how to set up Jest and how it works, but how to use it in practical real-world situations. After completing this course, not only will you be able to fully participate in any teams that are using Jest as their testing solution, but you can take the testing in your own applications to the next level and make a more informed decision about which testing framework is right for you. Overall, it's going to be a great course. So if web development, React, or testing interests you, be sure to check it out.

Introduction to Testing React Applications with Jest
Hi, I'm Daniel Stern, and I'm very happy to be introducing my course, Mastering React Testing with Jest. In this first chapter, Introduction to Testing React Applications with Jest, I'll let you know what you need to complete this course, as well as what you can expect from the remainder of the modules. A bit about me, I'm a full stack software developer. That means I'm comfortable doing front-end code and back-end code. I have experience with a few languages, but the one I like most is JavaScript, which is good because that's what I'm going to be teaching you over this series of lessons. I've worked for companies big and small like startups and banks, so I hope I have a broad enough perspective to relate this information to you in a way that's valuable for the projects you're trying to complete. In the next video, we'll be looking at what you need before beginning this course, so I hope you'll stick with us.

Scaffolding the App
Welcome back. In this module, we're going to go ahead and get started with the actual coding portion of this series of modules. So over the course of the next few videos we're going to assemble the app that we're going to test. Now I'm going to be copying and pasting a lot of code since this is a course on testing an app and not building an app, but there still should be quite a bit of stuff you can learn. So for a quick overview of our app, it's basically a simple shopping cart app. It has a few features that you might not see in your average, every day app like localization and isomorphism. So the app can be rendered on the server, and also it can change the language that the currency has displayed to suit the user's preferences, and behind it all we're using Express to manage the routes.

Implementing Basic Tests for a React Application with Jest
Alright, welcome back. In this module, we'll be testing basic functionality with Jest. So in the previous module we put together an application that features React as a front end and uses Express as a back end. In this chapter, we're going to create the scaffolding necessary to run Jest tests, and then create a few simple Jest tests. In the following chapter, we'll be doing some more challenging stuff with the Jest API, but for now we're just going to focus on the simple things. So before we begin, let's ask the question why do we test our apps? Well let's look at the following quote, "Testing leads to failure, and failure leads to understanding. " We basically write tests because we want tests to fail. If a test can't fail, then it's not a very useful test as a test that passes 100% of the time doesn't tell us anything about the underlying code. So with this in mind, let's discuss our first demonstration. First we're going to make a _tests_ folder, and then we're going to create a _mocks_ folder, and then we're going to add an entry to package. json. The net result of this is that we'll be all set to write our more advanced Jest tests in the following video.

Advanced React Testing with Jest
Welcome to this module, Testing Advanced Functionality with Jest. In the previous modules we scaffolded Jest, and now we're ready to really see what Jest can do in terms of some testing functionality that we don't get with other testing frameworks. This module will feature lots of examples. If you haven't already, go ahead and grab the course files, and download the dependencies with npm install. This will let you code along in the following segments. In this video, we'll discuss leveraging some of the more advanced functionality that's available in mocks. So as we discussed before, mocks are not the same thing as stubs. A stub is just kind of a placeholder for a function or an object that has no functionality whatsoever. Mocks have lots of useful functionality. For example, if you have an object that has a method called myMethod and you create a mock of it, you should theoretically be able to do things with the mocked method such as count how many times it was called or the arguments it was called with. We'll be doing quite a bit of that in the upcoming demonstration. So the basic idea when you're using Jest is you can use mocks to make sure that function calls have happened as expected. If, for example, you have an outside library, which you know works like jQuery, all you want to measure a lot of the time is that the right function on jQuery has simply been called. After that, you really don't even want anything to happen. So in the following demonstration, we're going to look at a common Jest problem and see how it's solved with mock functionality.

Conclusion to React Testing with Jest
Okay, it's been a very challenging course. We've now arrived at the final module, the Conclusion module, where we'll review everything we learned. So what did we learn from making our app and then testing it? The first thing we learned is that React's virtual DOM makes server-side rendering very, very easy. It's so easy to spin up our React app and test the DOM against our assumptions without using any kind of headless browser, as long as we have Node. This is pretty revolutionary compared to how testing is done in most other languages and libraries. We've learned that modern applications have a lot of functionality. They tend to use a lot of AJAX requests, and if they're React applications usually they have many stores and components. Testing these is hard, and often resolving the web of dependencies between them is even harder. That's why mocks are so good for dealing with web apps specifically. Finally, and this is kind of an addition, the apps that we make and we test, we can deploy on many different kinds of hosts. Traditional hosts won't really be able to run our Node tests, so if you want the tests to run on the server as well, you have to deploy them to a specialized host, one that can run note like Heroku or Divshot. Adding tests to your server is a great way to prevent breaking code from entering your production repository. If a developer pushes a request and the tests on the requests don't pass, then that push can be rejected. Overall, by adding tests to any application, that application becomes more reliable and robust. Working with JavaScript can be very tricky as JavaScript does not have any strong types, hence we must harness the power of testing to ensure our application works properly.