Skip to content

Writing and Visually Debugging Tests with Jest Preview

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Testing is critical when building an industry-grade application, working on a large code base, building anything that many users will use, or just adding employable skills to your belt.

Front end testing has become more complex over the years. Front-end developers now need to test the visual aspects of an application by testing end-to-end, testing components interacting with other components and the application, and unit testing individual parts of the application.

Keeping track of activities such as click events, user interactions with forms, and loading states of the application in the browser while being able to see changes to the application during testing is difficult to achieve. On top of that, performing debugging at the same time becomes almost impossible.

For the majority of us developers, debugging and tracking of tests or errors in the application are mostly achieved by scrolling through the codebase or errors in the console, relying only on the imaginative concept of what the UI components are at the time of testing.

Fortunately, Jest Preview is here to save the day!

Jest Preview

Jest Preview is an open-source package for debugging jest tests in the browser, giving developers the visual state of the application while testing. Jest-preview works with jest and react-testing-library by default.

For jest-preview to render the application, it initiates a server and serves the HTML in a browser. This allows you to visualize the application’s UI. This makes it easier to track and debug the jest tests.

Features of Jest Preview

Some key features of Jest Preview

  • Preview your actual app's HTML in a browser in milliseconds.
  • Auto reload browser when execute preview.debug().
  • CSS Support:
    • Direct CSS import
    • Number of CSS-in-JS libraries, such as:
      • Styled-components
      • Emotion
    • Global CSS
    • CSS Modules
    • Sass
  • Support for viewing images.

You can use Jest Preview with any testing libraries and frontend framework. Check out some examples of how to test with framework

To see jest-preview in action we are going to build a simple application with tests, and use Jest preview to test our application.

The Application

We will be creating a click and count React application:

yarn create react-app clickcount

Before we run the application, lets install a dependency:

yarn add --dev jest-preview

Since we used create-react-app, you must run the command: npx jest-preview config-cra

Here is sample code for our application:

function App() {
  const [count, setCount] = React.useState(0)

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)} data-testid='increase'>Click</button>
      <span data-testid='count'>{count}</span>
    </div>
  );
}

Then our test will look something like this:

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

describe('App', () => {
  it('renders learn react link', () => {
    render(<App />);

    debug();

    expect(screen.getByTestId('count')).toContainHTML('0');
  });

})

Let’s trigger a click event:

describe('App', () => {
  it('renders learn react link', () => {
    render(<App />);

    userEvent.click(screen.getByTestId('increase'));
    userEvent.click(screen.getByTestId('increase'));
    userEvent.click(screen.getByTestId('increase'));
    debug();

    expect(screen.getByTestId('count')).toContainHTML('0');
  });

})

Edit the package.json file, and add the following to the start object:

“start”: {
 …
 “jest-preview”: “jest-preview”
}

Running the tests:

First, run your tests, and then run your jest-preview command.

You could also add a concurrently running script, with a package like node-run-all:

npm install –save-dev node-run-all

Then, edit the package.json file.

“start”: {
 …
 “test:debug”: “npm-run-all -p test jest-preview”
}

Now run the command:

npm run test:debug

Conclusion

In this article you learned to use jest-preview which helps in tracking and debugging tests for frontend applications.

Hopefully you have learned how easy it is to visually debug your tests and projects in the browser with Jest preview!

Jest preview makes it easier to track all the steps of a test. You may also find that writing tests becomes more fun!

Will you be using jest-preview for your next project?

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co