Chapter 7: Introducing Testing to Rematch

In this chapter, we'll learn how to correctly test a real application using the best practices and the latest technologies out there. We'll learn about the differences between different types of testing and how our application can be easily refactored if our testing suite covers enough code to give us the confidence to move pieces of code without breaking the functionality.

This chapter is important to understanding testing concepts and the different libraries for testing. Also, it's important for understanding how Rematch models can be tested and learning about different concepts such as rootReducers that haven't been covered yet.

In this chapter, we'll cover the following topics:

• Introduction to JavaScript testing
• Preparing the environment
• Creating tests for Rematch models
• Creating tests for React components

By the end of the chapter, you will have learned what types of JavaScript...

Technical requirements

To follow along with this chapter, you will need the following:

• Basic knowledge of vanilla JavaScript and ES6 features
• Basic knowledge of HTML5 features
• Node.js >= 12
• Basic knowledge of React and CSS
• A browser (Chrome or Firefox, for instance)
• A code editor (Visual Studio Code, for instance)

You can find the code for this chapter in the book's GitHub repository: https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch/tree/main/packages/chapter-7.

Introduction to JavaScript testing

A couple of years ago, JavaScript testing was really obfuscated because no one used to care about testing front-end websites. HTML and CSS were not tested – no one even thought to test it – and JavaScript testing was strange to see. One of the main problems was that a lot of developers were coming from Java, where JUnit introduced everything needed to test an application – a test runner, a library to write the tests, an assertion library – and no equivalents existed for JavaScript.

We had to install three libraries to do something similar for JUnit. That meant that we had to learn how these three libraries worked, and of course there were situations where testing some edge cases was impossible due to incompatibility between libraries.

Let's start understanding how testing now works in JavaScript.

Types of tests

To understand how testing works a bit more and what types of testing exist, I'll try to...

Preparing the environment

To prepare the environment, we'll take the previous code we developed in Chapter 6, React with Rematch – The Best Couple – Part II, as the base application that is going to be tested with testing libraries such as Jest and Testing Library.

To make use of these libraries, first we must install them as dev dependencies using Yarn as we did in Chapter 6, React with Rematch – The Best Couple – Part II:

yarn add --dev jest esbuild-jest msw whatwg-fetch 

We're installing some interesting dependencies. Let's explain them:

• jest: As we explained in the previous section, Jest is the most powerful JavaScript testing framework out there, with an amazing focus on simplicity.
• esbuild-jest: Since we're using Vite, which uses esbuild under the hood, an extremely fast JavaScript bundler written in Go, the recommended approach is to transform our source code in the Jest tests in the same way that our application...

Creating tests for Rematch models

Tip

Before getting started with this section, I recommend taking a first look at the Jest documentation, https://jestjs.io, and discovering which assertions are available to understand this chapter even more. Along the chapter we'll explain in detail what they do and how Jest simplifies the testing process.

To get started, take a look at this code, which will be the pattern that we'll reuse for our tests:

describe("Describe the suite", () => {
  beforeEach(() => {})
  beforeAll(() => {})
  afterEach(() => {})
  afterAll(() => {})
  it("should do ...", () => {
    expect(1).toEqual(1)
  })
})

In all the tests that we are going to create, we'll define the describe() method, which allows us to gather our tests into separate groupings within the same file. In this way, we can describe the component name and just...

Creating tests for React components

As developers, we don't want complex development experiences where we get slowed down or, even worse, the entire team gets slowed down by complex architectures and libraries that make software unmaintainable. The React Testing Library is a lightweight solution for testing React components. It provides utility functions on top of react-dom to query the DOM in the same way the user would.

Understanding this as we did in the previous section, I'm going to explain the principal methods we're going to use, but I encourage you to have a read of the Testing Library website:

import { render, screen } from "@testing-library/react"
describe("described suite", () => {
  it("should render correctly", () => {
    render(<SomeComponent />)
    expect(screen.queryByText("some text in the screen")).    toBeInTheDocument(...

Summary

In this chapter, we have learned how to correctly test a complete application with side effects and complex logic as if it was a real shop with a cart system. Also, we have learned how to handle asynchronous operations to an external API with Rematch, and how this entire logic can be encapsulated inside Rematch models and tested easily for reuse in other applications.

In the next chapter, we'll iterate over this application using all the superpowers that Rematch offers thanks to its official Rematch plugin ecosystem. We'll introduce automatic loading/success behaviors, selectors for memoizing computed values, and even persisting the cart in the browser storage. In summary, we'll analyze how Rematch plugins work internally and the story behind them.