Writing Front-End Test with Jest

What is Front-End Testing

Front End testing is a systematic way of scrutinizing your application's inner & outer workings. This action ensures all views and functionalities adequately carry out their purpose and look like what they should[talk about pixel perfection in a functional context].

There are different types of testing in front-end, among which includes Unit testing, Visual regression, Performance testing…

In this tutorial, we'll be carrying out Unit testing, which checks that the functionalities across components work as expected, and we will be making use of Jest as a tool to carry out the test.

Pre-requisite

It does not require more than having your latest node.js software installed and a working keyboard.

Testing Testing 123...

I will be using my already created vite application. See the tutorial here.
On the other hand a create-react-app solves it here;

yarn create-react-app my-first-test

If you already have a project, you'll only have to add the react-test-renderer package in order to show us our snapshots

yarn add react-test-renderer

Moving forward, we will be making use of babel-react and react babel will help us to transform it into the test environment hence;

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react

After that your package.json should look like this. Mine might be more code cause, like I mentioned is an inherited[existing] project.

Create a babel.config.json file and add this;

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

Voilà!

Now it's time to make our Snapshot Test...

Let's test if our reusable button component works as we want it. Our Button.js the component should be like this;

import React, { useState } from "react";

const ACTIONS = {
  CLICKED: "clicked",
  HOVERED: "hovered",
  NORMAL: "normal",
};

const PrimaryButton = ({ children, variant }) => {
  const [actions, setActions] = useState(ACTIONS.CLICKED);

  const onClick = () => {
    setActions(ACTIONS.CLICKED);
  };
  const onMouseEnter = () => {
    setActions(ACTIONS.HOVERED);
  };
  const onMouseLeave = () => {
    setActions(ACTIONS.NORMAL);
  };

  return (
    <>
      <button
        onClick={onClick}
        variant={variant || "primaryButton"}
        className={actions}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {children}
      </button>
    </>
  );
};

export default PrimaryButton;

Supper chill, yeah?
Next, we will create a file called Labs.test.js, in this file, we'll be using our React renderer and Jest snapshot feature to interact with our components capturing the rendered snapshot as output and appending it to a new snapshot file.

import React from "react";
import renderer from "react-test-renderer";
import PrimaryButton from "./Button";

it("it triggers the follow up functions when clicked", () => {
  const component = renderer.create(
    <PrimaryButton variant={"primaryButton"}>SignIn</PrimaryButton>
  );
  let primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering click act
  renderer.act(() => {
    primaryButton.props.onClick();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering enter act
  renderer.act(() => {
    primaryButton.props.onMouseEnter();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering normal act
  renderer.act(() => {
    primaryButton.props.onMouseLeave();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();
});

Now on your CLI run yarn test or yarn jest and expect this output;

Hence aforementioned, a file __snapshots__/Labs.test.js.snap will be created automatically and have the following snapshots.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`it triggers the follow up functions when clicked 1`] = `
 <button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 2`] = `
<button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 3`] = `
<button
  className="hovered"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 4`] = `
<button
  className="normal"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

Finally, when you eventually make a change to your component, you'll need to update the test suit to capture the changes. If not, you'll get errors thrown at you. Therefore, run yarn jest -uto resolve that.
Thank you for following up on this tutorial. If you find or think it might help someone, do not hesitate to share.
Gracias Macho!