Resolving Common Component Testing Issues for React Applications

Jun 14
Engineering

By Nikolajus Lebedenko, Lead Frontend Engineer at Kilo Health

During the lifecycle of an application, you will start encountering more and more problems while testing the components. Especially if you would delay testing till some later stage. 

A perfect example of this is verifying that a bug is fixed in a production application that was never tested.

For demo purposes, let’s imagine that we are trying to test the “Add to cart” form component, which accomplishes the following things:

  • After submitting the form, it sends an HTTP request containing the product ID from the Redux state.
  • It notifies the analytics service that an item is added to the cart.

The dependency scheme for the component would look like this:

Identifying dependencies

​Most of the issues while testing components occur because of the dependencies. The “Add to cart” form is not an exception. 

The first step to success is to understand the dependencies of a component:

Most of these dependencies will be present in the components which hold business logic. So, what actual problems will we face while testing the “Add to cart” form, and how can we resolve them?

Wrapping a component with context providers

The first problem is that our component requires a few context providers to render:

– `I18nextProvider` for `react-i18next`.

– `Provider` for `react-redux`.

It might sound obvious, but you could not even imagine how much time developers spend trying to understand why a component fails to render

If you forgot to add a context provider in the test, a component would crash with the error, which would sound like the following – `cannot read property randomProperty of undefined`.

The solution for missing providers is to create a custom render function that lists all the required providers. Later on, replace usage of `render` function from testing library to custom render implementation. This solution is suggested by the Testing Library itself. 

In the end, the custom render function would look like this:

const AppWrapper = ({ children }) => {
 return (
   <I18nextProvider i18n={i18next}>
     <StoreProvider store={store}>
       {children}
     </Store>
   </I18nextProvider>
 );
};
​
const customRender = (component, options) => {
 render(component, { wrapper: AppWrapper, ...options });
};

Using a custom render function will reduce the amount of boilerplate code, and developers will not need to care much about wrapping components with context providers.

Building initial state for state management library

Secondly, our component requires a preloaded state with a predefined product inside. Usually, a state consists of quite complex objects. 

For example:

interface Product {
 id: string;
 sku: string;
 name: string;
 shortDescription: string;
 // ... other properties
}
​
interface PreloadedState {
 product?: Product;
 // ... other properties
}

Even though the “Add to cart” form needs only one property from the `Product` interface, we will need to pass an object that matches the `Product` interface. 

Imagine if the component depended on several complex objects – it would be a nightmare, and you would spend tons of time defining the initial state.

The solution for complex initial state issues is to implement a builder function that would generate an entity of your need. 

A product builder example:

type ProductBuilder = (product: Partial<Product> = {}) => Product;
​
const aProduct: ProductBuilder = (product) => ({
 id: randomId(),
 sku: randomSku(),
 name: randomProductName(),
 shortDescription: randomDescription(),
 ...product,
});
​
const randomProduct = aProduct();
const productWithSpecificName = aProduct({ name: 'My product' });
​const store = createStore(rootReducer, { product: aProduct() });


In builder functions, you may use libraries that would generate random properties such as ID, SKU, product name, etc. Using builder functions would allow it to easily generate entities for the components with a possibility to override certain properties.

Depending on concrete implementation rather than abstraction

The last problem you will encounter while testing the “Add to cart” form is depending on Axios and GTM. To be precise, that component will make real HTTP requests to the server and try to access the `window.dataLayer` object, which will be missing.

To resolve the last issue, we will need to do some refactoring and remove the direct dependency on problematic libraries. 

After refactoring, the scheme would look like this:

This way, the “Add to cart” form depends on implementations that match HTTP client and analytics service interfaces. For this reason, we are pretty flexible in creating test kit implementation for our dependencies and forwarding them using context providers. It will allow us to avoid HTTP requests or any environment-specific code. 

Also, providing a possibility to verify that integration between a component and service works as expected.

To wrap up

Even using a simple example of the “Add to cart” form, we have already faced some issues while writing component tests. 

  • Use the custom render function to wrap the component with context providers, which are required for your application.
  • Implement builder functions to get a preloaded state with a minimal amount of code.
  • Components should depend on abstractions that allow using test implementations for libraries with side effects.
Nikolajus Lebedenko

Latest articles

Deimante Butke and her 3 roles: Full-Time Job, Pursuing a PhD, and Motherhood
Feb 15
Kilo Heroes

I’m Deimante, currently Head of Marketing at Kilo Health, and a big lover of this company. My journey to being hired at Kilo has been quite the ride.  How it all started? I underwent interviews with 11 different people and…

Read more
Kilo Health Launches an Incubator Challenge: Ready to Test Yourself in a Startup?
Jan 12
Articles

Ever dreamt of taking the lead, even if the path isn’t crystal clear? Or to have someone believe in you and offer you a chance to figure out whether you would thrive in a startup environment? Speaking of which, Kilo…

Read more
Kilo Health Celebrates Its 10th Anniversary: Milestones and Lessons
Oct 25
News

A whole decade has raced by in the blink of an eye for us at Kilo Health, and what better way to celebrate than to reflect on the milestones and lessons over the years? Do you know where we started?…

Read more
Vitalijus Majorovas: Co-Founders Also Need Balance
Aug 23
Kilo Heroes

We, the co-founders, are just ordinary individuals with grand ambitions. There are times when we work twice as long and intensely as others, yet we’re equipped with the same amount of daytime, energy, and capacity. However, as leaders in the…

Read more
Following Your Gut: How to Avoid the Startup Graveyard
Aug 11
Kilo Heroes

There’s no enchanting tale behind how I became a part of Kilo Health. In truth, some of us regular folks simply have regular journeys, and that’s perfectly fine. What counts is that today, I hold a successful product in my…

Read more
Kilo Health Breaks Records: 84% Growth, 213M Euros in a Year
Aug 8
News

Reflecting on your achievements from the previous year is advantageous. That’s exactly what we did, proudly demonstrating our boundless aspirations through an impressive 84% growth and 213 million euros. So let’s put our hands in the air and celebrate together,…

Read more
I Don’t Need a New Job: Or How to Join Kilo Health Within 10 Minutes
Jul 14
Kilo Heroes

I joined Kilo Health back in 2019, and I can prove that when people’s values and mindsets align, great things can be accomplished, even if you don’t have a plan. BoomeranGO!, the first and only product for children provided by…

Read more
4 Ways Startups Can Draw Inspiration From Hollywood 
Jun 14
Kilo Heroes

Lighting, sound, set, and actors are essential components of a film studio, but they are not the sole factors that define its success.  Consistent creativity, appreciation of talent, and adaptability to market trends are a few of the things that…

Read more
NUTRITION AND WELLNESS TRENDS TO FOCUS ON IN 2024
Feb 22
News

By Kristina Zalnieraite As we enter the year 2024, the realm of nutrition trends is poised to undergo significant developments, placing particular attention on diverse subjects, with gut health emerging as a prominent focus. The spotlight on gut health has…

Read more
Predicting IT Trends: How Kilo Health Stays One Step Ahead
Jan 30
News

In such a fast-moving industry like digital health, keeping on top of the latest trends is essential for companies hoping to grow, succeed, and leave a lasting mark. As the leading Lithuanian company in the technology sector, Kilo Health certainly knows how…

Read more

Stay on top of health and wellness news

Kilo Outsider is a curated monthly newsletter for everyone who cares about health – from investors to policy makers, from entrepreneurs to healthy living enthusiasts.