Register to get access to free programming courses with interactive exercises

Testing JS: React

Frontend testing is a difficult task, so framework creators are constantly trying to simplify it in every way possible. React seems to have advanced the furthest in this regard, the most important element of this being the fact that the test framework jest was also developed by Facebook. Accordingly, the level of support for frontend testing, and specifically React. is extremely high.

JSDOM

jsdom - pure JS implementation of the DOM API for use in Node.js. The main purpose of the library is to emulate a subset of browser functions which is sufficient for testing and parsing sites. jsdom is built into jest and requires absolutely no configuration. This is easy to see if you open Hexlet tests in any practice exercise that works with a browser. In terms of usage, it looks like we have document and window available right in the test itself.

test('normalize', () => {
  const expected = '<p class="row">Text</p>';
  document.documentElement.innerHTML = expected;
  normalize(document);
  expect(document.body.innerHTML).toEqual(expected);
});

It begs the question: why use jsdom when there are drivers that work with real browsers. There are several answers:

  1. jsdom is much faster, which isn't surprising, since it's just a JS library (moreover, it's headless), unlike the browser.
  2. jsdom consumes significantly less memory to run.
  3. Most importantly, jsdom and the code of the application being tested work within a single Node.js interpreter. In practice, this causes any errors within the application code to show up with an exception and display a stack trace. This behavior makes debugging much easier.

The only serious disadvantage (which is arguably an advantage) is that jsdom is not a browser. In other words, tests may work perfectly well in jsdom, but not in a browser, and vice versa. In addition, jsdom is far behind the development of most browsers. New features appear in it much later, and the old ones don't all work. This problem is largely alleviated by the use of polyfills, but if you use something very exotic, you may have to simply not bother. All in all, we can at least say that it's manageable, and polyfills do save the day.

react-test-renderer

Since React generates a virtual DOM, you can take advantage of this. The react-test-renderer package provides the ability to render a React component without having to interact with a browser.

import reactTestRenderer from 'react-test-renderer';

const renderer = reactTestRenderer.create(
  <a href="https://www.facebook.com/">Facebook</a>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

This package makes it easy to use snapshot testing in Jest.It's sufficient to pass the result of the toJSON function call to expect.

react-testing-library

This library is for full React application testing, and its main idea is to ignore component implementation details and test the application as a real user would do. This library uses jsdom internally and is widely used in tests here on Hexlet:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('TodoBox 1', async () => {
  render(<TodoBox />);
  const input = screen.getByRole('textbox');
  const submitBtn = screen.getByRole('button', { name: 'add' });

  userEvent.type(input, 'new task');
  userEvent.click(submitBtn);

  expect(await screen.findByRole('link', { name: 'new task' })).toBeInTheDocument();
});

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.