DEV Community: Jagoda Bieniek

How to Test stopPropagation() in React Testing Library

Jagoda Bieniek — Wed, 29 Jan 2025 12:21:21 +0000

🚀 Introduction

Ensuring stopPropagation() works correctly in React applications is crucial when handling nested click events. Instead of checking if stopPropagation() was explicitly called, the best approach is to test its effect—whether the event propagates or not.

This article explores:

✅ The best approach to testing stopPropagation() (checking event propagation).

✅ An alternative method using event mocking.

✅ Which method is better and when to use each approach.

🛠 Best Approach: Testing the Effect of `stopPropagation()`

The recommended way to test stopPropagation() is to wrap the tested component inside a parent <div> with an onClick handler and check whether the event reaches the parent.

Example: Testing Propagation Prevention

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FormElementsList } from "@/components/FormElementsList";

it("stops propagation when an element is clicked", async () => {
  const onOuterClick = jest.fn();

  render(
    <div onClick={onOuterClick}>
      <FormElementsList elementsList={[{ name: "Text Input", type: "text", icon: <span>📝</span> }]} />
    </div>
  );

  const textInputElement = screen.getByText("Text Input");
  await userEvent.click(textInputElement);

  expect(onOuterClick).toHaveBeenCalledTimes(0); // Ensures event does not propagate
});

📌 Why This Works ?

The parent <div> has an onClick handler (onOuterClick).
If stopPropagation() is correctly applied inside FormElementsList, clicking on an element should not trigger onOuterClick.
The assertion expect(onOuterClick).toHaveBeenCalledTimes(0) ensures the event was stopped successfully.

🛠 Alternative: Mocking `stopPropagation()`

If you need to directly verify that stopPropagation() was called, you can mock the event and track the function call.

Example: Mocking stopPropagation()

import { render, screen } from "@testing-library/react";
import { FormElementsList } from "@/components/FormElementsList";

it("calls stopPropagation when an element is clicked", async () => {
  render(<FormElementsList elementsList={[{ name: "Text Input", type: "text", icon: <span>📝</span> }]} />);

  const textInputElement = screen.getByText("Text Input");

  const event = new MouseEvent("click", { bubbles: true });
  jest.spyOn(event, "stopPropagation");

  textInputElement.dispatchEvent(event);

  expect(event.stopPropagation).toHaveBeenCalled();
});

📌 Why This Works ?

jest.spyOn(event, "stopPropagation") tracks whether the function is called.
dispatchEvent(event) manually triggers the click event.
expect(event.stopPropagation).toHaveBeenCalled() ensures stopPropagation() was executed.

🛠 Which Method Should You Use?

Method	✅ Pros	❌ Cons
1. Testing Effect (Wrapper `<div>`)	Tests real user behavior	Doesn’t confirm `stopPropagation()` was explicitly called
2. Mocking `stopPropagation()`	Confirms `stopPropagation()` is called	Tests implementation rather than behavior

🚀 Recommended Approach

Prioritize testing real behavior over implementation details for better maintainability!

💬 Have you used different methods for testing event propagation? Share your thoughts in the comments!

Getting Started with Redux in React Testing Library: A Guide to Custom Render Functions.

Jagoda Bieniek — Mon, 04 Mar 2024 14:36:36 +0000

Introduction

Often in our projects we need to manage the state. For this purpose, we can use Redux however in 2024 there is a Redux toolkit , which simplifies the use of Redux itself. In this tutorial, I want to focus on how to start testing an application that uses the Redux toolkit.

Custom render function.

In testing React components, It is often used external libraries, not only redux-toolkit, but also react-router-dom or styled-components . In these cases, it is usefull to create custom render function.

Let's take as example boardSlice.ts (example from my project):

Import the necessary modules and components from React, Redux Toolkit, React Testing Library, and your application.

import { ReactElement, ReactNode } from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { boardSlice } from './store/slices';

Define the CustomRenderOptions interface witch extends the RenderOptions from @testing-library/react, excluding the wrapper property. It adds optional preloadedState and store properties. This allows you to pass an initial state for the Redux store or a custom store when calling customRender.

interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
  preloadedState?: Record<string, unknown>;
  store?: ReturnType<typeof configureStore>;
}

Create the customRender function takes a React element and an options object as arguments. The options object defaults to an empty object if not provided.
Create the Redux store: If a store is not provided in the options, a new store is created using the configureStore function from Redux Toolkit. The store uses the boardSlice.reducer as its reducer and the preloadedState as its initial state.

const customRender = (
  ui: ReactElement,
  {
    preloadedState = {},
    store = configureStore({
      reducer: { board: boardSlice.reducer },
      preloadedState,
    }),
    ...options
  }: CustomRenderOptions = {}
) => {
  // ...
};

Create the Wrapper component, wraps its children in a Redux Provider. The Provider makes the Redux store available to the components.

const Wrapper = ({ children }: { children: ReactNode }) => (
  <Provider store={store}>{children}</Provider>
);

Call the render function finally, the function calls the render function from React Testing Library, passing the ui and the Wrapper as the wrapper option.

return render(ui, { wrapper: Wrapper, ...options });

Export the customRender function, then exported as render, so it can be used in place of the render function from @testing-library/react.

export { customRender as render };

Finally we receive :

import { ReactElement, ReactNode } from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { boardSlice } from './store/slices';
interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
  preloadedState?: Record<string, unknown>;
  store?: ReturnType<typeof configureStore>;
}

const customRender = (
  ui: ReactElement,
  {
    preloadedState = {},
    store = configureStore({
      reducer: { board: boardSlice.reducer },
      preloadedState,
    }),
    ...options
  }: CustomRenderOptions = {}
) => {
  const Wrapper = ({ children }: { children: ReactNode }) => (
   // Here you can other providers
    <Provider store={store}>
      {children}
    </Provider>
  );

  return render(ui, { wrapper: Wrapper, ...options });
};

export * from '@testing-library/react';
export { customRender as render };

Sumarry

In this tutorial, we've explored how to create a custom render function for testing React components that interact with a Redux store, using Redux Toolkit. This custom render function simplifies the testing process by automatically wrapping the component under test in the necessary context providers, such as Redux's Provider and React Router's MemoryRouter.

We started by importing the necessary modules and defining a CustomRenderOptions interface to extend the RenderOptions from @testing-library/react. This interface allows us to optionally pass an initial state or a custom store to the customRender function.

Next, we created the customRender function, which takes a React element and an options object as arguments. Inside this function, we created a Redux store (if not provided in the options) and a Wrapper component that wraps its children in a Redux Provider.

Finally, we called the render function from @testing-library/react, passing the ui and the Wrapper as the wrapper option, and exported the customRender function as render.

This custom render function is a powerful tool that can simplify your test setup, reduce repetition in your tests, and make your tests more robust and flexible when working with libraries like Redux Toolkit.
With this configuration, your application is now equipped to handle Redux Toolkit in unit tests. In subsequent sections, we will delve into the specifics of what to test and how to conduct these tests within the Redux Toolkit context.

Getting Started with React Testing Library: Writing Your First Test.

Jagoda Bieniek — Fri, 23 Feb 2024 16:49:49 +0000

The difference between Jest and the React Testing Library is important to understand when writing unit tests for React components.

Jest:

Jest is a JavaScript testing framework.
It serves as a test runner, assertion library, and mock/stub/spy library.
Jest provides a testing environment where you can write and execute your test cases.
It provides features such as test suites, test cases, mocking functions, code coverage analysis and more.
Jest is highly optimised for performance and parallelization, making it a popular choice for testing JavaScript applications.

React Testing Library:

It's a utility library for testing React components.
It provides tools for interacting with React components in tests, simulating user behaviour, and asserting on rendered output.
It encourages testing components in a way that resembles how they will be used by end users.
It encourages writing tests that focus on behaviour rather than implementation details, resulting in more robust and maintainable tests.
The React Testing Library works on top of testing frameworks such as Jest, making it easy to integrate with existing Jest test suites.

Test's Anatomy.

Overall, the test facility is fundamental to writing tests in Jest. It allows you to organise your test cases, specify the behaviour you want to test, and define the expected results.

test(name, fn, timeout)

where:
name is a descriptive string that clearly indicates what aspect of the code is being tested.
fn is the function containing the actual test code.
timeout is the maximum amount of time (in milliseconds) that Jest will allow the test case to run before considering it a failure. The default timeout is 5000 milliseconds (5 seconds), but you can change it to suit your tests.

RTL unit tests consist of 3 stages:

render the component
find the element rendered by the component
assert against the element found in step 2, which passes or fails the test.

RTL Queries.

So how can we find element?

RTL provides a variety of query methods to find elements on the page when writing tests. Here's a breakdown of the three types of queries you mentioned:

getBy & getAllBy

getBy is used to find a single element that matches the specified criteria. If no matching element is found, it throws an error.
getAllBy is used to find multiple elements that match the specified criteria. If no matching elements are found, it throws an error.

queryBy & queryAllBy

queryBy is similar to getBy, but it returns null if no matching element is found instead of throwing an error.
queryAllBy is similar to getAllBy, but it returns an empty array if no matching elements are found instead of throwing an error.

findBy & findAllBy

findBy is used to find a single element asynchronously. It waits for the specified element to appear in the DOM within a certain timeout period. It returns a Promise that resolves when the element is found or rejects if the element is not found within the timeout.
findAllBy is similar to findBy, but it finds multiple elements asynchronously. Like findBy, it returns a Promise that resolves to an array of elements when they are found or rejects if no elements are found within the timeout.

How to start writing unit tests?

If setup Jest/ React Testing Library is already done
if not please read my article Getting start with React Testing Library we can move on to writing our first unit test.

Let's see what to test. In our case it will be simple component:

HomeView.tsx

const HomeView = () => <h1>Hello home view</h1>;
export default HomeView;

Our example component displays the string 'Hello home view', so the test case should check whether the string 'Hello home view' is displayed correctly.

Create a test file. There are actually 3 ways to do this:

inside component folder => ./HomeView/HomeView.test.tsx
inside component folder => ./HomeView/HomeView.spec.tsx
inside create src/tests ./HomeView.test.tsx

It is recommended that you always place your tests next to the code they test, so that relative imports are shorter.

In this tutorial I have chosen the first option.

Inside HomeView.test.tsx. Let's import the necessary dependencies

import { render } from '@testing-library/react';
import HomeView from './HomeView';

As you can see, we first import the render function, which allows us to render React components in a test environment, and the function takes a JSX element . Then we can use the utilities mentioned above.

import { render } from '@testing-library/react';
import HomeView from './HomeView';


 test('HomeView renders the heading with correct text', ()=>{
   // render compoment 
   render(<HomeView/>); 
   // heading element 
   const headingElement = 
     screen.getByRole('heading', { level: 1}); 
   // assertion 
   expect(headingElement).toBeInTheDocument();
  })

Good practices for unit testing with the React Testing Library and beyond.

Jagoda Bieniek — Sat, 27 Jan 2024 17:56:01 +0000

An introduction to Unit Testing ?

There is no set of rules that determines the answer to this question (which was personally difficult for me), but in this article I would like to give you some guidelines to help you get started with unit testing.
When creating test cases, it is worth keeping in mind how user interfaces will be used by users, and further testing for maintainability.

What to test ?

Unit testing in the context of front-end development involves testing individual components or features of the user interface to ensure that they work as expected. Here are some aspects to consider when deciding what to test in front-end unit testing:

Component rendering whether the component renders correctly with the props, or without them if they are not mandatory, as it will render without them.
Edge cases test your components with extreme or unexpected input to ensure they handle edge cases gracefully.
Component behaviour test the interaction and behaviour of your components. For example, if you have a button that triggers an action, make sure it behaves as expected when clicked. Check state changes in response to user interaction.
State management if your front-end relies on state management (e.g. with React's state or Redux), test that the state updates as expected. Verify that the UI responds appropriately to state changes.
DOM manipulation if your components manipulate the DOM directly, test that these manipulations are correct.

Best Practices for Writing Tests.

Write descriptive names. Write clear and descriptive names for your test cases. This makes it easy for developers to understand the purpose of each test.

Test one separated unit of working code. Try to find the smallest but autonomous peace of code. In the case of the front end, it includes: all the user interactions with our front end layer, such as clicks, double clicks, submit ,focus ,typing , etc.

Test Driven Development approach. As I mentioned before, it is essential to test small peace of code, but if you start your implementation from test? this way of writing unit test helps you at the beginning to ensure that your code is designed in accordance with business need expentations, help you remember about every case that should be considered. From my own experience, I see that it is easier to 'mock' dependencies for testing witch at the begaing of your path can be challenging.

Mock External Dependencies. Isolate your unit tests by using mocks or stubs for external dependencies such as API calls or services. This allows you to focus on testing the specific functionality of the component without relying on the entire system.

Selective coverage in real time for writing unit tests is limited due to the business pressure to finish development faster, so our role is to organise the work to maintain high quality code and ensure it is delivered on time. My recommendation is to start testing from the Javascript code and then move on to the visual aspect. This way we cover the functional part of the application and protect the critical business logic.

Do not test implementation details its key role due to writing unit test, because in case of possible refactoring of code, which is something common in development of application, the tests related to implementation would be needed to be changed, resulting in generating tons of additional work.

Best Practices for Writing Tests with React Testing Library.

The general guidelines above also apply to writing unit tests using the React Testing Library however it worthy to exdends thiis rules about RTL philosophy.

Accesibility RTL provides queries, such as getByRole or getByText, that allow you to select elements based on their role or text content, which is essential for verifying that the correct information is being presented to users. Below i present hierarchy of using RTL queries.

// getByRole()
// getByLabelText()
// getByText()
// getByDisplayValue()
// getByTitle()
// getByTestId()( when text is dynamic)

Why in that order ? The RTL creators correctly point out that getByTestId, which is related to the DOM, is irrelevant to the user.

Real-world usability testing should reflect user interaction with the application as closely as possible.

Summary

The overall goal is to facilitate the creation of effective tests that reflect real-world usage and ensure the reliability of application components.
Writing unit tests is key to maintaining high code quality, but we should remember that aiming for 100% coverage may not be the best solution. Focus on the most important functionality.

In the next article, we'll look at the practicalities of writing your first unit tests. We'll guide you through the process of creating tests for simple components using the React Testing Library (RTL), a popular testing tool in the React ecosystem.

An Introduction to Testing Library for React components.

Jagoda Bieniek — Fri, 05 Jan 2024 12:09:09 +0000

React Testing Library - introduction

React Testing Library (RTL) is a powerful tool for testing React components. It is built on top of the DOM Testing Library and is focused on simulating user behavior as closely as possible in your tests.

Why should you use React Testing Library?

Current with React, RTL ensures alignment with the most recent versions of React, providing developers confidence that their testing practices remain up-to-date.

Lightweight, The library provides utility functions on top of 'react-dom' without adding significant overhead.

Easy Setup, Starting with Create React App version >=3.4.0, React Testing Library is already included along with the necessary setup.

Increasing Popularity, According to npm trends, React Testing Library has gained popularity over its main competitor, Enzyme.js.

Framework Agnostic ,For developers working with different frameworks, analogous libraries are available inspired by the same principles, such as Vue Testing Library and Angular Testing Library, etc.

Features of RTL

Accesibility RTL encourages you to interact with your components in ways that a real user would, thus it is good practice to use query methods which are based on the role of the element for the user.
Simple API RTL offers set of utilities that simplify much of the underlying complexity of testing React Components.
Full DOM Rendering (RTL) does not provide a "shallow" rendering function like Enzyme's shallow. RTL's philosophy is to test components as closely as possible to how they work in the browser, which means testing them within the context of the full DOM with child components rendered as well.
Independ from React feature If you are aiming to test components without relying on React-specific features or APIs, you can mock out dependencies or use plain JavaScript when asserting and interacting with your components in RTL.

Getting Started with RTL

As mentioned, for versions greater than or equal to 3.4.0, the configuration is ready to use. Go to your package.json and check if you have the following command:

 "scripts": {
    "test": "react-scripts test"
  }

and following dependencies: testing-library/jest-dom,testing-library/react and Jest you can start to write your first test.

For lower version you need intall following dependencies
if you use npm

npm install --save-dev @testing-library/react @testing-library/jest-dom

or with yarn:

yarn add --dev @testing-library/react @testing-library/jest-dom

Integrate Jest with React testing Library create file jest.setup.js and paste following base configuration:

import '@testing-library/jest-dom';
 module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,jsx}'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};

Summary

React Testing Library (RTL) offers developers a robust solution for testing React components that emphasizes real-world user behavior. Aligning with the latest advancements in React, RTL ensures testing methods remain up-to-date and lightweight, avoiding cumbersome configurations, especially with Create React App (v3.4.0+), where RTL is pre-included.

The adoption of RTL over Enzyme.js is on the rise as it focuses on full DOM rendering for realistic test scenarios, accessibility-first querying, and a simplified API. It also supports testing components without dependency on React-specific APIs by enabling plain JavaScript usage.

To get started with RTL in projects using Create React App (v3.4.0+), simply check your package.json for the test script and necessary dependencies such as testing-library/jest-dom and testing-library/react. For older setups, installation is straightforward with npm or yarn, followed by a basic Jest configuration in jest.setup.js.

With this setup, developers can begin writing tests with confidence, benefiting from RTL's focus on user-centric testing practices and its flexibility to adapt to non-React specific environments.

However, keep in mind that Enzyme is an older tool; there is more information available about various use cases and issues, which allows developers to better prepare for encountering similar situations in their project.

In our upcoming articles, we will take a closer look into the world of testing React components. We'll guide you through practical examples and strategies for testing the most popular functionalities within React applications.

DEV Community: Jagoda Bieniek

How to Test stopPropagation() in React Testing Library

🚀 Introduction

🛠 Best Approach: Testing the Effect of stopPropagation()

🛠 Alternative: Mocking stopPropagation()

🛠 Which Method Should You Use?

🚀 Recommended Approach

Getting Started with Redux in React Testing Library: A Guide to Custom Render Functions.

Introduction

Custom render function.

Sumarry

Getting Started with React Testing Library: Writing Your First Test.

Jest:

React Testing Library:

Test's Anatomy.

RTL Queries.

How to start writing unit tests?

Good practices for unit testing with the React Testing Library and beyond.

An introduction to Unit Testing ?

What to test ?

Best Practices for Writing Tests.

Best Practices for Writing Tests with React Testing Library.

Summary

An Introduction to Testing Library for React components.

React Testing Library - introduction

Why should you use React Testing Library?

Features of RTL

Getting Started with RTL

Summary

🛠 Best Approach: Testing the Effect of `stopPropagation()`

🛠 Alternative: Mocking `stopPropagation()`