Testing React using a lightweight virtual DOM.

Testing Library is a lightweight and simple testing library for testing frontend code, and libraries like React and Vue. It gives us a couple key functions for adding and removing our components from a virtual DOM, and checking the contents of the items we render. The core library is built for Vanilla JS (without a framework) but there are addon utility functions for testing React and Vue. The documents for the library can be found here.

The testing-library npm module was built for running browser tests on servers, that wouldn’t have access to the browser APIs for rendering DOM nodes or other features. We will use it as a shortcut, combining a couple key methods of the library with jest (a full-featured testing library).

The primary reason that testing-library exists is because it is much faster to test Frontend JS code if you don’t need to spin up the entire browser runtime environment. The framework is built off the fact that most of the tests that we would want to run to test our interfaces are really simple DOM interactions, like rendering some HTML to the DOM and clicking or interacting with the DOM in basic ways. You don’t need the whole browser environment spun up to do that.

Testing library says about their philosophy:

“The core library, DOM Testing Library, is a light-weight solution for testing web pages by querying and interacting with DOM nodes (whether simulated with JSDOM/Jest or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that’s similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence that your application will work when a real user uses it.”

Previous testing libraries, especially those built for testing react, were very over-optimized and created simulated browser environments, had complex configurations, and methods for testing things like component state, which at its core isn’t really important to the user, or to the testing suite. These features made the testing very slow, when all we really want is to render and interact with our interface.

The primary tools that “core DOM” testing library gives us are the following:

  1. A number of queries to help us navigate around the DOM, for example ‘getByLabelText’ which is a function in the global namespace that will allow you to find DOM nodes by label text.
  2. The fireEvent function for simulating user interactions
  3. The classic ‘expect’ syntax for test assertions that comes from BDD (behavior-driven-development) principles.
  4. Some async utilities, to help you mock up common async DOM actions like an API call. The function for example, allows you to run tests only when the function passed in has returned.

The react testing library built on top of testing-library adds a few more helper functions to the mix, most notably the function ‘render’ which simply renders your component and creates a simulated node that you can then run tests on.

Using Testing-Library

The simplest setup for writing tests looks like this:

import React from ‘react’import { render, fireEvent } from ‘@testing-library/react’import ‘@testing-library/jest-dom/extend-expect’import BlogForm from ‘./BlogForm’

We are importing render and fireEvent methods from the react testing library (though the fireEvent method is also found in the core DOM library) and then importing the full extended testing library script, which allows us to use the expect syntax to write tests.

To reiterate — testing library imports the expect functionality from Jest, and you can add additional methods to the expect syntax with the following import

We can render our component to the DOM with the following command:

Then if you want to observe the rendered result, you can use another helper function on the component object, . This will print your component to the console when you run tests.

The simplest test you might run is a check to see if the component renders. This is accomplished with code like the following.

Here we are simply finding the component in the (by default the virtual document.body DOM node) and checking to see that it’s rendered. This example doesn’t use any of the man sophisticated query functions in the library, but they are there if you need them.

The next type of test you might want to run is a mock callback. To accomplish this you will need the following:

This uses the mocking functionality inside jest to create a fake version of the function of the component that I am going to call () and then we call it and make sure that it has been called once.

These simple features, when combined with the mocking functionality and expect syntax of Jest, provide a clean and powerful way for us to test react components. View the following more complex test, making sure that the values of the function are what we expect them to be when we call the function.

Thank you for reading, follow me Alex Zito-Wolf


Product Manager + Software Developer. Interested in Travel, Culture, and the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store