How to Test Custom Hook with react testing library

Question

I tried using react-hooks-testing-library but it dosn't seem how handle hooks that use useContext.

import React,{useContext} from 'react'
import {AuthContextData} from '../../AuthContext/AuthContext'
const useAuthContext = () => {
    const {authState} = useContext(AuthContextData) 
    const {isAuth,token,userId,userData} = authState
    return {isAuth,token,userId,userData}
  }
  export default useAuthContext

Does this answer your question? Testing a custom hook with renderHook — Liam
– Liam, Commented May 23, 2023 at 18:41

Gio Polvara · Accepted Answer · 2019-03-29 18:52:25Z

3

You have to wrap your hook in a context provider:

let authContext
renderHook(() => (authContext = useAuthContext()), {
  wrapper: ({ children }) => (
    <AuthContextData.Provider value={/* Your value */}>
      {children}
    <AuthContextData.Provider>
  )
})

answered Mar 29, 2019 at 18:52

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

François Alexandre COLOMBANI · Accepted Answer · 2019-08-30 10:37:07Z

-1

Let's say you have a component where you call the useContext(context) hook to get a key isLoading that should be false or true.

If you want to test useContext in a component you could test it as follow:

const context = jest.spyOn(React, 'useContext');

if each test in the same file need to have different context values, then inside your test, you can mock the implementation like this:

context.mockImplementationOnce(() => {
    return { isLoading: false };
  });

or outside the tests for all tests to have same context:

context.mockImplementation(() => {
    return { isLoading: false };
  });

Hope it helps.

answered Aug 30, 2019 at 10:37

François Alexandre COLOMBANI

5755 silver badges6 bronze badges

2 Comments

Liam Over a year ago

Redux explicitly say Do not try to mock selector functions or the React-Redux hooks!

Nacho H Over a year ago

But this is not redux, this is react. Although I believe the accepted answer is a best approach, this is valid as well.

Collectives™ on Stack Overflow

How to Test Custom Hook with react testing library

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related