DEV Community: Victory Asokomeh

A Practical Guide to Testing React Applications (Unit Tests)

Victory Asokomeh — Mon, 26 Feb 2024 13:45:59 +0000

Introduction

Test Driven Development (TDD) is a beneficial practice for engineers, but in reality, it's not always feasible.

However, the initial investment in writing automated tests is worth the effort as it saves you time in the long run.

In this article, we’ll explore how to set up automated tests for a simple React application.

The principles used here will prove relevant for more complex scenarios.

How to go about testing

You can test for many things when building, but it is important to prioritize the things with the potential to impact users the most first.

With this in mind, these questions can serve as a guide

What is the typical workflow for users on the application?
What features will cause the most disruption for the users in the event of failure?

Your priority should be to test for functionality rather than implementation details. In a React application, implementation details can refer to the inner workings of a function or component.

Tests should be deterministic, such that given the same inputs they always return the same results.

Implementation

Our demo application displays a list view of users fetched from an API, a button to toggle more details for each user, and the ability to search for a specific user.

We will explore how to test using Jest and React Testing Library.

Installation

Run the following command to install the necessary packages

npm install --save-dev @testing-library/dom @testing-library/jest-dom @testing-library/react react-test-renderer @testing-library/react-hooks
or 
yarn add --dev @testing-library/dom @testing-library/jest-dom @testing-library/react react-test-renderer @testing-library/react-hooks

GridItem.tsx

import { IUser, SelectedUser } from "../../models";

import styles from "./gridItem.module.css";

export interface IGridItem {
 user: IUser;
 handleOpen: () => void;
 setSelectedUser: (user: SelectedUser) => void;
}

function GridItem({ user, handleOpen, setSelectedUser }: IGridItem) {
 function handleClick() {
   setSelectedUser(user);
   handleOpen();
 }

 return (
   <article className={styles.container} data-testid="GridItem">
     <p>{user.name}</p>
     <button onClick={handleClick}>View User</button>
   </article>
 );
}

export default GridItem;

As we’ve established earlier we don’t test for implementation details, we only want to concern ourselves with the input and output from this component.

Here inputs are the following props:

user object
handleOpen function,
setSelectedUser function to set the selected user.

The outputs are

User name text
a button labeled View User that triggers a handleOpen function.

So we test that given said input, we get the same output.

//GridItem.test.tsx
import { render, fireEvent, screen } from "@testing-library/react";
import GridItem, { IGridItem } from "../../../components/GridItem";

const componentProps: IGridItem = {
 user: {
   avatarUrl: "https://i.pravatar.cc/150?img=68",
   id: 0,
   name: "John Smith",
   gender: "male",
   age: 20
 },
 handleOpen: jest.fn(),
 setSelectedUser: jest.fn()
};

test("Should render the username and the handleOpen function is called when 'view user' button is clicked ", () => {
 render(<GridItem {...componentProps} />);

 expect(screen.getByText(componentProps.user.name)).toBeInTheDocument();

 const viewButton = screen.getByText(/view user/i);

 fireEvent.click(viewButton);

 expect(componentProps.handleOpen).toHaveBeenCalled();
});

First, we define the props to be passed into the component as componentProps

We define our test using the test function from Jest. This function takes 2 parameters, a description first and a callback function containing the test logic.

We use the render, fireEvent, and screen utilities from @testing-library/react.

The render utility function mounts the component into the DOM.

The expect utility from Jest gives us access to methods called matchers we can use to check for test conditions.

We confirm the DOM contains the username we provided using the toBeInTheDocument matcher from jest.

You can negate this check by using the not modifier from Jest

expect(screen.getByText(componentProps.user.name)).not.toBeInTheDocument();

Next, we check for a view user button by doing a regex case-insensitive search for the label.

We confirm that clicking the ‘View User’ button triggers the Jest mock function assigned to ‘handleOpen’.

Grid.tsx

import React from "react";
import GridItem from "../GridItem";
import { IUser, SelectedUser } from "../../models";
import useDisclosure from "../../hooks/useDisclosure";
import Modal from "../Modal";
import UserDisplay from "../UserDisplay";

import styles from "./grid.module.css";

interface IGrid {
 users: IUser[] | undefined;
}

function Grid({ users }: IGrid) {
 const { isOpen, onOpen, onClose } = useDisclosure();
 const [selectedUser, setSelectedUser] = React.useState<SelectedUser>(
   undefined
 );

 function handleCloseModal() {
   onClose();
   setSelectedUser(undefined);
 }

 if (!users || !users.length)
   return <p className={styles.no_result}>No user found</p>;

 return (
   <>
     {isOpen ? (
       <Modal title="User Info" onClose={handleCloseModal} isOpen={isOpen}>
         <UserDisplay user={selectedUser} />
       </Modal>
     ) : null}

     <div className={styles.container}>
       {users.map((user) => (
         <GridItem
           user={user}
           key={user.id}
           handleOpen={onOpen}
           setSelectedUser={setSelectedUser}
         />
       ))}
     </div>
   </>
 );
}

export default Grid;

Here we want to assert that given a list of users, the component returns;

A list of users (GridItem component) equal to the number of items on the list
A descriptive error when no user is provided.

//Grid.test.tsx
import Grid from "../../../components/Grid";
import { IUser } from "../../../models";
import { render, screen } from "@testing-library/react";

const users: IUser[] = [
 {
   avatarUrl: "https://i.pravatar.cc/150?img=68",
   id: 0,
   name: "John Smith",
   gender: "male",
   age: 20
 },
 {
   avatarUrl: "https://i.pravatar.cc/150?img=48",
   id: 1,
   name: "Martha Liberty",
   gender: "female",
   age: 18
 }
];

test("It renders the list of user", () => {
 render(<Grid users={users} />);

 expect(screen.getAllByTestId("GridItem")).toHaveLength(users.length);
});

test("it shows descriptive text when no user is provided", () => {
 render(<Grid users={undefined} />);

 expect(screen.getByText(/No user found/i)).toBeInTheDocument();
});

First, render the Grid component with an array of users as the ‘user’ props value

Select all the instances of GridItem rendered using the testId attribute with getAllByTestId.

Assert that the occurrence of GridItem in the DOM is equal to the number of users supplied.

data-testid is a special attribute used for testing, and should be used sparingly after the other queries don't work for your use case.

We also confirm that No user found is displayed when the users prop is undefined.

UserDisplay.tsx

import { SelectedUser } from "../../models";

import styles from "./userDisplay.module.css";

function UserDisplay({ user }: { user: SelectedUser }) {
 if (!user) return null;

 return (
   <article className={styles.container}>
     {user.avatarUrl && (
       <img src={user.avatarUrl} alt={user.name} data-testid="UserImage" />
     )}

     <div>
       <h1>{user.name}</h1>
       <p>{user.gender}</p>
       <p>{user.age}</p>
     </div>
   </article>
 );
}

export default UserDisplay;

To test this component, we assert that given the right props, it renders the user details including user including the user’s image, name, gender, and age.

//UserDisplay.test.tsx
import UserDisplay from "../../../components/UserDisplay";
import { axe } from "jest-axe";
import { render, screen } from "@testing-library/react";
import { IUser } from "../../../models";

const user: IUser = {
 avatarUrl: "https://i.pravatar.cc/150?img=68",
 id: 0,
 name: "John Smith",
 gender: "male",
 age: 20
};

test("Should render the user name, gender and age", () => {
 render(<UserDisplay user={user} />);

 expect(screen.getByText(user.name)).toBeInTheDocument();
 expect(screen.getByText(user.gender)).toBeInTheDocument();
 expect(screen.getByText(user.age)).toBeInTheDocument();
 expect(screen.getByTestId("UserImage")).toBeInTheDocument();
});

First, we Render the UserDisplay component with a sample user object.

Then we write assertions for the properties of the user object by using corresponding matchers.

We can also write tests to verify that this component does not have accessibility violations (e.g. alt attribute for the user image is present).

We use the jest-axe package, which extends jest with custom matchers from axe-core, an accessibility testing engine for HTML-based user interfaces.

Installation

yarn add jest-axe @types/jest-axe 
or 
npm i jest-axe @types/jest-axe

jest-axe has a utility toHaveNoViolations which asserts that a React component does not have any accessibility violations according to the Axe rules.

In setupTests.ts import toHaveNoViolations and extend jest using the extend utility.

//setupTests.ts
import { toHaveNoViolations } from "jest-axe";
expect.extend(toHaveNoViolations);

To test for accessibility violations we define an additional test function in the UserDisplay.test.tsx file.

//UserDisplay.test.tsx
test("should not fail any accessibility tests", async () => {
 const { container } = render(<UserDisplay user={user} />);

 expect(await axe(container)).toHaveNoViolations();
});

Container here is a variable that refers to the root DOM element that contains the rendered output from the render method.

We check for accessibility compliance by calling the toHaveNoViolations matcher on the container variable.

Modal.tsx

import React from "react";

import styles from "./modal.module.css";

function disablePageScroll() {
 document.body.style.overflow = "hidden";
}

function enablePageScroll() {
 document.body.style.overflow = "unset";
}

interface IModal {
 title: string;
 onClose: () => void;
 isOpen: boolean;
 children: React.ReactNode;
}

function Modal(props: IModal) {
 const { title, onClose, isOpen, children } = props;

 React.useEffect(() => {
   if (isOpen) {
     disablePageScroll();
   }
   return () => {
     enablePageScroll();
   };
 }, [isOpen]);

 return (
   <div role="dialog" aria-modal="true">
     <div
       data-testid="modalOverlay"
       className={styles.modal_overlay}
       onClick={onClose}
     ></div>

     <div className={styles.modal_wrapper}>
       <p className={styles.modal_title}>{title}</p>
       <div className={styles.modal_content}>{children}</div>
       <button onClick={onClose}>Close modal</button>
     </div>
   </div>
 );
}

export default Modal;

The component takes the following props;

a title, isOpen boolean,
onClose function triggered when the modal overlay or Close modal button is clicked
children property for rendering nested items, Here we use the text React is fun

//Modal.test.tsx
import Modal from "../../../components/Modal";
import { render, fireEvent } from "@testing-library/react";

const componentProps = {
 title: "Random Title",
 onClose: jest.fn(),
 isOpen: true,
 children: <p>React is fun</p>
};

const renderComponent = (props = componentProps) =>
 render(<Modal {...props} />);

test("Modal should render title, children and close button ", () => {
 const { getByText } = renderComponent();

 expect(getByText(componentProps.title)).toBeInTheDocument();

 expect(getByText(/React is fun/i)).toBeInTheDocument();

 expect(getByText(/Close modal/i)).toBeInTheDocument();
});

test("clicking the close button or the modal overlay should call the onClose function", () => {
 const { getByText, getByTestId } = renderComponent();
 const closeButton = getByText(/Close modal/i);
 const modalOverlay = getByTestId("modalOverlay");

 fireEvent.click(closeButton);
 fireEvent.click(modalOverlay);

 expect(componentProps.onClose).toHaveBeenCalledTimes(2);
});

First, we check for the title in the DOM.

Next, check for children by searching for the text “React is fun” and a button with a close modal label is rendered.

Next, we check that the onClose function is called by either clicking the close modal button or the modal overlay.

We do this by using the toHaveBeenCalledTimes matcher from jest which takes in the number of times we expect a mock function to be called.

Testing React hooks

UseDisclosure.tsx

import React from "react";

const defaultState = { isOpen: false };

const actions = {
 ON: "ON",
 OFF: "OFF",
 TOGGLE: "TOGGLE"
} as const;

type reducerType = { type: keyof typeof actions };

function disclosureReducer(state: typeof defaultState, action: reducerType) {
 switch (action.type) {
   case actions.ON:
     return { isOpen: true };
   case actions.OFF:
     return { isOpen: false };
   case actions.TOGGLE:
     return { isOpen: !state.isOpen };

   default:
     return state;
 }
}

function useDisclosure(initialState = defaultState) {
 const [{ isOpen }, dispatch] = React.useReducer(
   disclosureReducer,
   initialState
 );

 const onOpen = () => dispatch({ type: actions.ON });
 const onClose = () => dispatch({ type: actions.OFF });
 const onToggle = () => dispatch({ type: actions.TOGGLE });

 return { isOpen, onOpen, onClose, onToggle };
}

export default useDisclosure;

This is a simple hook that allows you to handle common state open, close, and toggle scenarios.

@testing-library/react-hooks exposes a renderHook function that can render the custom hook, and it returns a result property on which we can run assertions.

//UseDisclosure.test.tsx
import useDisclosure from "../../../hooks/useDisclosure";
import { renderHook, act } from "@testing-library/react-hooks";

test("returns the correct initial values", () => {
 const { result } = renderHook(() => useDisclosure({ isOpen: true }));

 expect(result.current.isOpen).toBe(true);
 expect(typeof result.current.onOpen).toBe("function");
 expect(typeof result.current.onClose).toBe("function");
 expect(typeof result.current.onToggle).toBe("function");
});

test("toggles the state correctly", () => {
 const { result } = renderHook(() => useDisclosure());

 // Check that the initial state is false
 expect(result.current.isOpen).toBe(false);

 act(() => result.current.onOpen()); // open fn
 expect(result.current.isOpen).toBe(true);

 act(() => result.current.onClose()); // Close fn
 expect(result.current.isOpen).toBe(false);

 act(() => result.current.onToggle()); // Toggle fn
 expect(result.current.isOpen).toBe(true);

 act(() => result.current.onToggle());
 expect(result.current.isOpen).toBe(false);
});

To check that the hook returns the right values, we render the hook with an initial value of true, then write assertions to confirm that isOpen evaluates to true and onOpen, onClose, and onToggle are functions.

Next, we test that the isOpen property returns false when an initial value is absent.

@testing-library/react -ho oks exposes a method called act that allows us to run updates to component state synchronously.

Using this method we can simulate the action of calling the onOpen, onClose, and onToggle functions and check that the isOpen value updates accordingly.

Finally to run the test use yarn test or npm test.

You can add the --watch flag to run this command in watch mode so the tests will automatically re-run whenever there are changes to the test file.

Conclusion

There are several other things we can explore with testing, like snapshot testing, and checking for false positives, but these are beyond the scope of this post.

You can find the full implementation in this Codesandbox

In the next one, we will look at how to incorporate integration tests in the same application.

Cover photo by Rahul Mishra on Unsplash

The State Reducer Pattern with React Hooks

Victory Asokomeh — Mon, 13 Feb 2023 08:03:14 +0000

Introduction

I like that React is loosely opinionated, you are provided with tools and given the freedom to choose the "what” and the “how” for your project.

As exciting as having autonomy while building sounds, it can quickly become an issue. If you’ve encountered several React applications built by different engineers, you will quickly find out that everyone builds using their preferred way which usually leads to inconsistency and this can be a nightmare.

Patterns provide a way to handle complex scenarios reliably while following best practices. We’ll be diving into one of my favorite React patterns.

Today we will cover the State Reducer Pattern. This pattern was made popular by Kent C .Dodds. It helps you to control how application state is updated elegantly.

We can use this pattern with the useState and useReducer hooks from React. It makes use of a reducer, which is essentially a function that takes your current state and an action which then returns a new state value based on the action you specify.

Implementation

We'll keep things simple and implement a contrived version of Chakra-UI's useDisclosure hook. This hook allows you to handle common state open, close, and toggle scenarios.

Our example consists of a simple modal that is controlled using the return values from the useDisclosure hook.

Alright, let's see some code!

First, we define our initial state which is an object with the isOpen property and equate it to false.

const initialState = { isOpen: false };

We define action types so we don't have to manually type them repeatedly and avoid typos.

const actions = {
 ON: "ON",
 OFF: "OFF",
 TOGGLE: "TOGGLE"
} as const;

Next, we define a reducer that takes two parameters, the state and an action.

type actionTypes = { type: keyof typeof actions };

function disclosureReducer(state: typeof initialState, action: actionTypes) {
 switch (action.type) {
   case actions.ON:
     return { isOpen: true };

   case actions.OFF:
     return { isOpen: false };

   case actions.TOGGLE:
     return { isOpen: !state.isOpen };

   default:
     return state;
 }
}

In TypeScript, we have to define types also :)

keyof typeof actions evaluates to the union type
ON | OFF | TOGGLE which are the possible values for our actions.

typeof initialState implies that isOpen has to be a boolean.

Next, we create the useDisclosureHook custom hook

function useDisclosure() {
 const [{ isOpen }, dispatch] = React.useReducer(
   disclosureReducer,
   initialState
 );

 const onOpen = () => dispatch({ type: actions.ON });
 const onClose = () => dispatch({ type: actions.OFF });
 const onToggle = () => dispatch({ type: actions.TOGGLE });

 return { isOpen, onOpen, onClose, onToggle };
}
export default useDisclosure;

Our custom hook makes use of a useReducer. We pass the disclosureReducer and initialState as inputs and get the state and dispatch function as outputs.

The dispatch function is used to trigger the specific action we want. We could return this dispatch function as an output from the custom hook. In this scenario, we know what actions to expect so we use action creators onOpen, onClose, and onToggle and expose them instead.

We could also allow inversion of control by giving the consumer of our custom hook the option to specify a reducer, however, this is beyond the scope of our example.

function useDisclosure({suppledReducer = disclosureReducer} = {}) {
 const [{ isOpen }, dispatch] = React.useReducer(
   suppledReducer,
   initialState
 );
 .......
}

Usage

Our custom hook returns the isOpen value, onOpen, onToggle and onClose methods, which can control app behavior, as shown in our example.

import Modal from "./components/Modal";
import useDisclosure from "./hooks/useDisclosure";
import "./styles.css";

export default function App() {
 const { isOpen, onOpen, onClose } = useDisclosure();
 return (
   <div className="App">
     {isOpen && (
       <Modal title="Modal title" onClose={onClose}>
         <p>
           Modal content{" "}
           <span role="img" aria-label="Smile emoji">
             😊
           </span>
         </p>
       </Modal>
     )}

     <button onClick={onOpen}>Show modal</button>
   </div>
 );
}

Conclusion

Here is the final version

import React from "react";

const initialState = { isOpen: false };

const actions = {
 ON: "ON",
 OFF: "OFF",
 TOGGLE: "TOGGLE"
} as const;

type reducerType = { type: keyof typeof actions };

function disclosureReducer(state: typeof initialState, action: reducerType) {
 switch (action.type) {
   case actions.ON:
     return { isOpen: true };

   case actions.OFF:
     return { isOpen: false };

   case actions.TOGGLE:
     return { isOpen: !state.isOpen };

   default:
     return state;
 }
}

function useDisclosure() {
 const [{ isOpen }, dispatch] = React.useReducer(
   disclosureReducer,
   initialState
 );

 const onOpen = () => dispatch({ type: actions.ON });
 const onClose = () => dispatch({ type: actions.OFF });
 const onToggle = () => dispatch({ type: actions.TOGGLE });

 return { isOpen, onOpen, onClose, onToggle };
}

export default useDisclosure;

You can find the full implementation in this codesandbox.

The state reducer pattern allows us to effectively separate state logic from our components.

It enables us to handle complex state and side effects predictably and consistently.

This pattern can come in very handy when used in the right scenario.

I hope you give it a try!

Cover Photo by Rahul Mishra on Unsplash