HTML-Based Tests

Learn how to use the jsdom library with Jest to test HTML elements and interactions.

Jest uses a library named jsdom to allow for testing HTML elements and interactions. The jsdom is not an actual browser; it is a library that implements the JavaScript DOMThe Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. API, and can, therefore, simulate a full-blown browser experience. The benefit of using jsdom is in the speed at which we can run our tests and the fact that we do not have to provide an environment that can run a full browser.

Running a full internet browser generally assumes that the tests are running on a standard computer and, as such, have an actual screen. This means that virtual machines that run tests must be configured with a screen, which adds the extra requirement of having a screen driver that can run at the required resolution.

Checking DOM updates

With jsdom and jquery installed, we can write a test that checks whether the DOM has been updated. Consider the following code:

Get hands-on with 1200+ tech skills courses.