Skip to content

Writing and Visually Debugging Tests with Jest Preview

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 Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript