Chapter 12. Testing Your Frontend

This chapter explains the basics of testing React apps. We will give an overview of using Jest, which is a JavaScript test library developed by Facebook. We will also cover Enzyme, which is a testing utility for React, developed by Airbnb. We will look at how you can create new test suites and tests. We will also cover how to run the test and discover the results of the test.

In this chapter, we will look at the following:

• The basics of Jest
• How to create new test suites and tests
• The basics of the Enzyme test utility
• How to install Enzyme
• How to create tests with Enzyme

Technical requirements

The Spring Boot application that we created in Chapter 4, Securing and Testing Your Backend, is needed (GitHub: https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2.0-and-React/tree/master/Chapter%204).

We also need the React app that we used in the previous chapter (GitHub: https://github.com/PacktPublishing/Hands-On-Full-Stack-Development-with-Spring-Boot-2.0-and-React/tree/master/Chapter%2011).

Using Jest

Jest is a test library for JavaScript and it is developed by Facebook (https://facebook.github.io/jest/en/). Jest is widely used with React and it provides lots of useful features for testing. You can create a snapshot test, where you can take snapshots from React trees and investigate how states are changing. Jest also has mock functionalities that you can use to test, for example, your asynchronous REST API calls. Jest also provides functions that are needed for the assertions in your test cases.

We will first see how you can create...

Summary

In this chapter, we gave a basic overview of how to test React apps. Jest is a testing library developed by Facebook, and it is already available in our frontend because we created our app with create-react-app. We created a couple of tests with Jest, and ran those tests to see how you can check the results of tests. We installed Enzyme, which is a test utility for React. With Enzyme, you can easily test your React component rendering and events. In the next chapter, we will secure our application, and add the login functionality to the frontend.

Questions

1. What is Jest?
2. How should you create test cases using Jest?
3. How should you create a snapshot test using Jest?
4. What is Enzyme?
5. How should you install Enzyme?
6. How should you test rendering with Enzyme?
7. How should you test events with Enzyme?

Further reading

Packt has other great resources for learning about React and testing:

• https://www.packtpub.com/web-development/react-16-tooling
• https://www.packtpub.com/web-development/jasmine-javascript-testing-second-edition