Introduction to Modernizing an Enterprise React App

Video Course Overview - Modernizing an Enterprise React App

Get familiar with the sample React application's folder structure and current functionality.

What We'll Build In This React Course - Hardware Handler

Introduction

Module 1 Introduction

Learn about the motivation behind React Hooks, the benefits it can bring, and the rules that apply to all Hooks in a React application.

React Hooks - Understanding The Basic Rules and Benefits

The useState Hook is the most similar to traditional state in React class-based components, and we'll look at examples of how it works to keep track of state in functional components.

React's useState Hook - Track Functional Component States

useEffect is a game-changing hook: originally compared to lifecycle methods in React components, it's close but not truly a direct comparison.

How Does React's useEffect Hook Work?

While less often discussed, the useRef Hook deserves covering because a time will come when it's the right solution to reach for; here, we'll talk about how useRef's "mutable" value property can be useful.

Learning About The React useRef Hook And Mutable Values

Context is a powerful API to pass state within React applications, and with the introduction of the useContext Hook, accessing state in any component (class or functional) is possible.

A Step-by-Step Guide to Using React's useContext Hook

Custom hooks are arguably the most important addition of all the hooks released with React 16.8.0. Explore how custom hooks can dramatically simplify sharing code between components.

An Introduction To Custom Hooks In React

This lesson is a summary of the React Hooks we've covered in Module 1.0

Module 1 Summary

React Hooks

Introduction to Module 2: Upgrading React App Version

Module 2 Introduction

Before we can do anything else, we must upgrade our sample app's React version to start taking advantage of the advances.

Upgrade the React app version

Avoid one of the most common developer woes: different devs coding with different environment versions with the help of Volta and Node Engines.

Dev Teams, Lock Down Environment Versions With Volta

This lesson is a summary of module 2.0, where we upgraded our React version and locked in our project configuration.

Module 2 Summary

Upgrade the React App

Introduction to module 3: Code formatting setup

Module 3 Introduction

Code formatting, especially when it's set up, so you don't even have to think about it, is the best.

Code Formatting - An Overview Of Prettier And How To Set It Up

Make JavaScript code quality better and avoid bugs with the help of a linter and a strict set of rules.

How To Set Up ESLint For Modernizing A React App

This lesson is a summary of the automated code formatting and linting we set up with the help Prettier and ESLint in Module 3.0.

Module 3 Summary

Configure Prettier and ESLint

Introduction to Module 4: Refactoring to hooks

Module 4 Introduction

We dip our toes into converting a class component to a functional one with Hardware Handler's home page.

Refactor Home.js

We get our first real taste of adding hooks while refactoring the App component.

Refactor App.js

The checkout page uses multiple API calls to correctly display the items a product manager wants to ship to stores.

Refactor Checkout.js

Ah forms, a painful Achilles heel of most web applications (React apps included) since the beginning of time.

Refactor ProductForm.js

We saved the best (i.e. the most complicated) component for last. The product list, with its filters and products, is no match for our newly honed skills though.

Refactor ProductList.js

This lesson is a summary of Module 4.0, where we systematically refactored our app's outdated class components to now use React Hooks.

Module 4 Summary

Refactor React Classes to React Hooks

Module 5 Introduction

We'll write our first custom hook to fetch department info for our application in one centralized place.

Our First Custom Hook: useDepartments

Custom hooks are good for more than just drying up duplicated code; they also help simplify our components.

Simplify Complex Components with the useProducts Hook

Some custom hooks can help simplify code beyond the original components they touch.

The useCheckout Hook will do Double Duty in our App

This lesson is a summary of module 5.0's custom hooks we added to Hardware Handler.

Module 5 Summary

Create Custom Hooks for the App

Introduction to module 6: The useContext Hook

Module 6 Introduction

Bring the Context API into Hardware Handler to decrease our reliance on props.

Simplify React Prop Management With A Context Hook

Context doesn't necessarily need to live at the top level of a component to be useful.

Setting Up Contexts To Share Functions Within A React App

This lesson summarizes our addition of the Context API and useContext Hooks in Module 6.0.

Module 6 Summary

Incorporate the Context API

Module 7 Introduction

This library took aim at a few fundamental flaws in the traditional way of integration testing JavaScript applications and really changed the game when it comes to automated testing.

Introducing React Testing Library And Its Automation Capabilities

We've got a little setup work to do before we get to the actual business of writing our tests.

Strategies For Simplifying Integration Testing For React Apps

React Testing Library's approach to integration testing like a user would interact with the DOM works very well with React's function-based components.

How To Write Tests For React Container Components

Test Hardware Handler's custom hooks

Not all of our testing for our React app relies so heavily on RTL — some files Jest can handle on its own.

A Guide To API Service Layer Testing With The Jest Framework

This lesson is a summary of module 7.0, where we started adding unit and integration tests to our app to increase our confidence our app works as expected.

Module 7 Summary

Integration Testing with Jest and React Testing Library

Module 8 Introduction

End-to-end testing has never been the easiest thing to do, but Cypress challenges that statement in a big way.

Cypress.io And End-To-End Testing - What You Need To Know

Cypress gives us a big helping hand organizing and getting started with our own e2es.

Add Cypress To A React App For Automated End-To-End Testing

Cypress makes the process of writing e2es relatively simple with lots of built-in methods and documentation to show you the way to use it effectively.

Write And Run End-To-End Test Flows With Cypress.io

The Studio feature makes e2e test writing faster and easier than it's ever been before.

Try out Cypress Studio

This lesson is a summary of module 8.0, where we integrated Cypress into a React app and wrote automated end-to-end tests.

Module 8 Summary

End-to-End Testing with Cypress

Introduction to module 9: Design system libraries

Module 9 Introduction

Design systems provide more than just a bunch of prebuilt components for developers.

Why use a Design System?

Setting Ant Design up takes a little doing because it's so customizable.

How To Add Ant Design System To A React App

Ant Design's thorough documentation makes the process of replacing custom components less difficult than it might otherwise be.

Swap out Some Simple Components

While these components require a little more effort to get working, the improvements they provide are worth the time.

How To Add An Ant Design System Form To A React App

This lesson summarizes module 9.0, where we learned about the benefits of a design system and incorporated the popular Ant Design into our own app.

Module 9 Summary

Bonus Module: Add a Design System Library

Recapping Modernizing an Enterprise React App

Summing It All Up

In this course we'll dive into all the ways to modernize an existing React application - from tooling and linting, to testing and Hooks. React is a powerful, extremely popular JavaScript framework, but keeping applications up to date with all that it has to offer is tough - especially when dealing with the larger, enterprise-level business applications many developers are responsible for.

## Why this course

The newline Guide to Modernizing an Enterprise React application will cover everything you need to know to confidently work on a React application of any size, in any state, and leave it better than when you found it. 

While many React tutorials start with the latest version of React, or gloss over all the other things required to make sure apps vital to a company's success keep running, this course does not. In 54 lessons spanning 10 modules, it tackles head-on, the many things that must be considered when building and maintaining large, complex React apps.

## Course modules 

As you progress through this course, you'll gain a deeper understanding for how and why React Hooks came to be, the importance of various types of automated testing and project configuration, and how to leverage design systems to improve your application. You will gain a detailed understanding of how to modernize a React app in a real-world scenario, bringing it in line with today's development standards. 

![Home page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-home-page.png)

### Part one: tooling and setup

The first part of this course will consist of getting familiar with our example application, and doing the behind-the-scenes work to set it up for success. 

We'll learn about why React Hooks came about and how to use them, how to upgrade an outdated React app successfully, and how to use tools like Volta, ESLint and Prettier to improve the app's code and development experience.

- Module 0: Meet Hardware Handler - our outdated, but promising React application.
- Module 1: [React Hooks](https://reactjs.org/docs/hooks-intro.html#motivation) - why they were created, the issues they solve and how the most common ones work.
- Module 2: Upgrading a React app - our app needs an upgrade to use Hooks, and we'll streamline development with [Volta](https://volta.sh/).
- Module 3: Project configuration - adding [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) to our app will dramatically improve code quality.  

### Part two: refactoring the code

With our app configured for success, we'll get down to the business of refactoring Hardware Handler. 

I'll show you my strategy for converting class components to functional ones, and we'll go file-by-file keeping the app's functionality intact while upgrading it to use hooks - including custom hooks, and the Context API. 

- Module 4: Classes to functions - we'll take every class component and turn it into a functional component.
- Module 5: [Custom hooks](https://reactjs.org/docs/hooks-custom.html) - we'll identify where custom hooks can simplify our functional components further.
- Module 6: [Context API](https://reactjs.org/docs/context.html) - a few strategically placed React contexts will round out our code improvements.

### Part three: testing

An updated application is only half the battle for enterprise-level apps; development teams must also be confident in their continued success as the apps expand in size and scope. 

We'll add automated testing to our app using the widely accepted testing frameworks React Testing Library and Cypress.

- Module 7: Integration testing - the popular combination of [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) will be used to unit test smaller pieces of our app.
- Module 8: End-to-end testing - the ease of writing e2es with [Cypress Studio](https://www.cypress.io/) will blow you away.

### Bonus: design systems

Finally, I've included a special bonus module about how to incorporate design systems into an already existing application, and switch out components in a systematic way. Design systems and component libraries are quickly gaining ground - especially in big orgs with lots of apps and development teams. 

Being able to effectively use one is an important skill to learn.

- Module 9: [Ant Design](https://ant.design/) - we'll swap in the robust design system's components to handle our app's more complex interactions for us.

![Product page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-product-page.png)

## Bottom Line

In 10 modules, we'll go step-by-step taking an app from outdated in every way to up to today's high standards, giving you ample practice and hands-on examples along the way. 

If you've been wanting to get more confident in your React skills _and_ see what it takes to build enterprise apps in today's world, this is the course for you.

![Checkout page of the Hardware Handler sample React application](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-modernizing-an-enterprise-react-app/module_10/lesson_00.00/public/assets/hardware-handler-check-out.png)

In this course, you'll learn all the pieces that go into modernizing an existing React application so it can take advantage of the latest framework features and run well for years to come.

The newline Guide to Modernizing an Enterprise React App

How to modernize an existing React application according to today's standards

How React Hooks work compared to class components

How config tools Volta and Node engines simplify development

How to set up ESLint and Prettier to improve code quality

How to upgrade an existing React app and refactor the app as you go

How to write integration tests with React Testing Library to ensure app functionality

How end-to-end tests with Cypress can test mission critical user flows

How to incorporate a component library to speed up design and development time

Integration testing React Custom Hooks is a little bit different than testing functional components because these hooks don't have to be tied to a specific component. But not to worry, React Testing Library's 

We'll go through the hows and whys of testing custom hooks in our React application in this lesson, so you'll be ready to tackle any hooks you may come across.

The useProducts.js Hook is a good hook to start with

Since our custom hooks aren't tied tightly to a particular component (the whole point of them is decoupled, reusable functionality), and they live in their own separate 

 folder inside of our app, to test them, I like to create a 

 folder to group all the hook tests together.

Make a new test folder and file for our custom hooks

Keep it explicit about exactly which custom hook is being tested by naming the new file something like: 

From here, we can get started on our tests for the 

Unlike our other test lesson, which used the 

Just like the first testing library, this hooks library aims to provide a testing experience as close as possible to natively using a custom hook from within a real component.

The key method we need from this hooks library is called 

To make use of it, we'll import it at the top of our file, then create a reusable helper function to render our hook without having to copy all the required boilerplate for each of our tests.

import { renderHook } from '@testing-library/react-hooks';
import { useProducts } from '../useProducts';

const renderUseProductsHook = async () => {
  const { result, waitForNextUpdate } = renderHook(() => useProducts());
  await waitForNextUpdate();
  return { result, waitForNextUpdate };
};

Okay, let's talk about what's happening up above in this 

When we're rendering a function component with JSX, we can just pass any props and mock any data that component needs. For custom hooks, however, we have to create and render the hook to test and mock any variables or functions being passed into the hook (there are none in the case of the 

 method we imported from the testing library and create an instance of the hook to test (

) inside of that method. It's in here that we'd pass any previously defined mocks or variables required by the hook.

 function, we destructure two objects: the 

 is a function that returns a Promise that resolves the next time the hook renders. We need this function to run after the first 

 function to wait for React to update. This is because React Testing Library can't wait for the DOM to update because there is no DOM when testing custom hooks.

 variables are returned from the function because we need them for our actual tests.

By defining all of this within a helper function, we can call this function from all of our tests and save ourselves the duplicate code to make these hooks.

Time to move on: let's put this function into practice.

Another piece of setup we need to do for this hook test is mocking the 

Since our hook will call this function every time it's run, it makes sense to wrap our data in a 

Then we'll set up our mock where we spy on the 

 and the data we expect to be returned from the mock.

  const getAllProductsMock = jest.spyOn(productApi, 'getAllProducts');

  beforeEach(() => {
    getAllProductsMock.mockResolvedValue([
      {
        brand: 'Gnome Gardening',
        departmentId: 45,
        description: 'A trowel above all others.',
        id: 1,
        name: 'Polka Dot Trowel',
        retailPrice: 999,
      },
      {
        brand: 'Gnome Gardening',
        departmentId: 45,
        description:
          'Protect yourself from sun burn while gardening with a wide brimmed, lightweight sun hat.',
        id: 2,
        name: 'Rose Sun Hat',
        retailPrice: 2495,
      },
      {
        brand: 'SL',
        departmentId: 56,
        description:
          'This fridge keeps your food at the perfect temperature guaranteed.',
        id: 3,
        name: 'Stainless Steel Refrigerator',
        retailPrice: 229900,
      },
      {
        brand: 'Swirl Pool',
        departmentId: 56,
        description:
          'Clothes have never been so clean, and a washer has never looked so stylish cleaning them.',
        id: 4,
        name: 'Matte Black Connected Washing Machine',
        retailPrice: 45050,
      },
    ]);

 to clean up and reset our mocks for each test.

  afterEach(() => {
    jest.resetAllMocks();
  });

I think now we can get to testing our hook — finally!

Test that products and brand filters return from the hook

Our hook returns three separate pieces of info, but two of the pieces — the products and the filters by brand name — are tied together. As long as the product API returns data, both of those pieces of information can be determined from it. So it makes sense to me to test for both of those pieces of info together.

Here's how we'll approach these tests: we'll render our custom hook using the helper function we defined and destructure the 

 properties and compare their values against our mocked data set that we composed in our previous lesson in the 

Not only will we check the length of both variables to ensure they match our mocked data, but we'll also use the 

 to test that the objects have the same values and structure.

If we want to, we can even check that the 

  it('should return a list of of products and filters by brand when the product API returns info', async () => {
    const { result } = await renderUseProductsHook();
    const { products, filtersByBrand, error } = result.current;
    expect(products.length).toEqual(dataSet.products.length);
    expect(filtersByBrand.length).toEqual(dataSet.filtersByBrand.length);
    expect(products).toStrictEqual(dataSet.products);
    expect(filtersByBrand).toStrictEqual(dataSet.filtersByBrand);
    expect(error).not.toBeTruthy();
  });

 object is rendered from our custom hook, making checks against the data returned is pretty easy and similar to things we might check in a typical functional component.

Test if the product API fails, the hook returns an error

For this test, we'll override our expected 

 with a custom one that throws the error from the server instead of returning data.

Once more, we'll then render the hook, extract the objects from the 

 object, and check the values are what we expect when this 

  it('should return an error if the product API fails to return data', async () => {
    getAllProductsMock.mockResolvedValue(FETCH_PRODUCT_DATA_ERROR);

    const { result } = await renderUseProductsHook();
    const { products, filtersByBrand, error } = result.current;
    expect(products).toEqual(FETCH_PRODUCT_DATA_ERROR);
    expect(filtersByBrand).toEqual([]);
    expect(error).toBeTruthy();
  });

As a gut check, let's run our new test file and check the code coverage for this custom hook now.

Here's the terminal's code coverage output.

---
title: 'A Beginner's Guide To Testing Custom Hooks In React'
role: 'LESSON'
description: Testing a custom hook might sound intimidating at first, but there are actually some repeatable steps that take a lot of the guesswork and mystery out of it.
privateVideoUrl: https://fullstack.wistia.com/medias/fz7dzu6t9a
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/paige-niedringhaus-modernizing-an-enterprise-react-app-app/-/tree/main/code/module_08/lesson_08.02/protected/source_code/hardware-handler-7-ending?ref_type=heads
---

# Test Hardware Handler's custom hooks

Integration testing React Custom Hooks is a little bit different than testing functional components because these hooks don't have to be tied to a specific component. But not to worry, React Testing Library's `@testing-library/react-hooks` package will help us handle them.

**We'll go through the hows and whys of testing custom hooks in our React application in this lesson, so you'll be ready to tackle any hooks you may come across.**

### The useProducts.js Hook is a good hook to start with

Since our custom hooks aren't tied tightly to a particular component (the whole point of them is decoupled, reusable functionality), and they live in their own separate `hooks/` folder inside of our app, to test them, I like to create a `test/` folder to group all the hook tests together.

#### Make a new test folder and file for our custom hooks

To get us going, let's make a new `test/` folder inside of the `hooks/` folder and create our first test file.

Keep it explicit about exactly which custom hook is being tested by naming the new file something like: `useProducts.test.js`.

From here, we can get started on our tests for the `useProducts` Hook.

#### Set up our test file

Unlike our other test lesson, which used the `@testing-library/react` library for methods like `render` and `fireEvent`, this custom hook is going to use the [`@testing-library/react-hooks` library](https://github.com/testing-library/react-hooks-testing-library#the-problem).

Just like the first testing library, this hooks library aims to provide a testing experience as close as possible to natively using a custom hook from within a real component.

**Define a render hook helper function**

The key method we need from this hooks library is called [`renderHook`](https://react-hooks-testing-library.com/reference/api#renderhook).

To make use of it, we'll import it at the top of our file, then create a reusable helper function to render our hook without having to copy all the required boilerplate for each of our tests.

```javascript
import { renderHook } from '@testing-library/react-hooks';
import { useProducts } from '../useProducts';

const renderUseProductsHook = async () => {
  const { result, waitForNextUpdate } = renderHook(() => useProducts());
  await waitForNextUpdate();
  return { result, waitForNextUpdate };
};
```

Okay, let's talk about what's happening up above in this `renderUseProductsHook` function.

When we're rendering a function component with JSX, we can just pass any props and mock any data that component needs. For custom hooks, however, we have to create and render the hook to test and mock any variables or functions being passed into the hook (there are none in the case of the `useProducts` Hook).

Once that's done, we'll call the `renderHook` method we imported from the testing library and create an instance of the hook to test (`useProducts`) inside of that method. It's in here that we'd pass any previously defined mocks or variables required by the hook.

From the `renderHook` function, we destructure two objects: the `result` and the `waitForNextUpdate` function.

[`waitForNextUpdate`](https://react-hooks-testing-library.com/reference/api#waitfornextupdate) is a function that returns a Promise that resolves the next time the hook renders. We need this function to run after the first `renderHook` function to wait for React to update. This is because React Testing Library can't wait for the DOM to update because there is no DOM when testing custom hooks.

Finally, the `result` and the `waitForNextUpdate` variables are returned from the function because we need them for our actual tests.

By defining all of this within a helper function, we can call this function from all of our tests and save ourselves the duplicate code to make these hooks.

Time to move on: let's put this function into practice.

**Mock the product API**

Another piece of setup we need to do for this hook test is mocking the `productApi` function that the hook calls: the `getAllProducts` function.

Since our hook will call this function every time it's run, it makes sense to wrap our data in a `beforeEach` function.

First, we'll write our generic `describe` block for these tests to live within:

```javascript { actualFilename=../lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js endLine=13 startLine=13 statedFilename=src/hooks/test/useProducts.test.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-modernizing-an-enterprise-react-app/module_08/lesson_08.04/.lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js#L13 }
describe('the useProducts Hook', () => {
```

Then we'll set up our mock where we spy on the `productApi` and the data we expect to be returned from the mock.

```javascript { actualFilename=../lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js endLine=53 startLine=14 statedFilename=src/hooks/test/useProducts.test.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-modernizing-an-enterprise-react-app/module_08/lesson_08.04/.lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js#L14 }
  const getAllProductsMock = jest.spyOn(productApi, 'getAllProducts');

  beforeEach(() => {
    getAllProductsMock.mockResolvedValue([
      {
        brand: 'Gnome Gardening',
        departmentId: 45,
        description: 'A trowel above all others.',
        id: 1,
        name: 'Polka Dot Trowel',
        retailPrice: 999,
      },
      {
        brand: 'Gnome Gardening',
        departmentId: 45,
        description:
          'Protect yourself from sun burn while gardening with a wide brimmed, lightweight sun hat.',
        id: 2,
        name: 'Rose Sun Hat',
        retailPrice: 2495,
      },
      {
        brand: 'SL',
        departmentId: 56,
        description:
          'This fridge keeps your food at the perfect temperature guaranteed.',
        id: 3,
        name: 'Stainless Steel Refrigerator',
        retailPrice: 229900,
      },
      {
        brand: 'Swirl Pool',
        departmentId: 56,
        description:
          'Clothes have never been so clean, and a washer has never looked so stylish cleaning them.',
        id: 4,
        name: 'Matte Black Connected Washing Machine',
        retailPrice: 45050,
      },
    ]);
```

And if we set up a `beforeEach`, we need to set up an `afterEach` to clean up and reset our mocks for each test.

```javascript { actualFilename=../lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js endLine=58 startLine=56 statedFilename=src/hooks/test/useProducts.test.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-modernizing-an-enterprise-react-app/module_08/lesson_08.04/.lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js#L56 }
  afterEach(() => {
    jest.resetAllMocks();
  });
```

I think now we can get to testing our hook — finally!

**Test that products and brand filters return from the hook**

Our hook returns three separate pieces of info, but two of the pieces — the products and the filters by brand name — are tied together. As long as the product API returns data, both of those pieces of information can be determined from it. So it makes sense to me to test for both of those pieces of info together.

Here's how we'll approach these tests: we'll render our custom hook using the helper function we defined and destructure the `result` object from it.

From the `result` object, we'll look for the `products` and `filtersByBrand` properties and compare their values against our mocked data set that we composed in our previous lesson in the `mockDataSet.json` file.

Not only will we check the length of both variables to ensure they match our mocked data, but we'll also use the [Jest method `toStrictEqual`](https://jestjs.io/docs/expect#tostrictequalvalue) to test that the objects have the same values and structure.

If we want to, we can even check that the `error` still has the value of `false` in this test.

Here's what my test looks like.

```javascript { actualFilename=../lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js endLine=68 startLine=60 statedFilename=src/hooks/test/useProducts.test.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-modernizing-an-enterprise-react-app/module_08/lesson_08.04/.lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js#L60 }
  it('should return a list of of products and filters by brand when the product API returns info', async () => {
    const { result } = await renderUseProductsHook();
    const { products, filtersByBrand, error } = result.current;
    expect(products.length).toEqual(dataSet.products.length);
    expect(filtersByBrand.length).toEqual(dataSet.filtersByBrand.length);
    expect(products).toStrictEqual(dataSet.products);
    expect(filtersByBrand).toStrictEqual(dataSet.filtersByBrand);
    expect(error).not.toBeTruthy();
  });
```

As you can see, once the `result` object is rendered from our custom hook, making checks against the data returned is pretty easy and similar to things we might check in a typical functional component.

Ready to move on to when our `productApi` call throws an error?

**Test if the product API fails, the hook returns an error**

For this test, we'll override our expected `getAllProductsMock` with a custom one that throws the error from the server instead of returning data.

Once more, we'll then render the hook, extract the objects from the `result.current` object, and check the values are what we expect when this `getAllProducts` API call fails.

Here's how I'd write this second test.

```javascript { actualFilename=../lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js endLine=78 startLine=70 statedFilename=src/hooks/test/useProducts.test.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-modernizing-an-enterprise-react-app/module_08/lesson_08.04/.lesson_08.02/protected/source_code/hardware-handler-7-ending/client/src/hooks/test/useProducts.test.js#L70 }
  it('should return an error if the product API fails to return data', async () => {
    getAllProductsMock.mockResolvedValue(FETCH_PRODUCT_DATA_ERROR);

    const { result } = await renderUseProductsHook();
    const { products, filtersByBrand, error } = result.current;
    expect(products).toEqual(FETCH_PRODUCT_DATA_ERROR);
    expect(filtersByBrand).toEqual([]);
    expect(error).toBeTruthy();
  });
```