Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

76
Visualizações
RenderHook improperly wrapping context provider and causing Context to be undefined in testing-library

I have a test that should render a hook via renderHook, and also wrap it in a context provider:

describe("useShowMessages", () => {
  const amendedMockContext = {
    ...baseMockContext, // baseMockContext is jut an object I've been using with a value for each item I have in context.
    conversationData: {
      data: [{ key: "test" }],
    },
  };
  const MockContext = createContext(amendedMockContext);
  it("should return a full visibility tree on first call", () => {
    const wrapper = ({ children }: any) => (
      // @ts-ignore
      <MockContext.Provider value={amendedMockContext}>
        {children}
      </MockContext.Provider>
    );
    const { result } = renderHook(() => useShowMessages(), { wrapper });
    console.log(result.current);
  });
});

I use context in my hook like so:

export const useShowMessages = () => {
  const {
    conversationData: { data },
    setNeedsInputIndexes,
    showChat,
    setCurrentStep,
  } = useContext(AppContext);

 // the rest of the hook logic
}

However, when I try to run this test, I always get the same error:

TypeError: Cannot read properties of undefined (reading 'data')

       5 | export const useShowMessages = () => {
       6 |   const {
    >  7 |     conversationData: { data },
         |                         ^
       8 |     setNeedsInputIndexes,
       9 |     showChat,
      10 |     setCurrentStep,

You can see that the test is failing where I am trying to extract context values using useContext. It is not recognising data at all.

I've set it up following the examples laid out in testing-library docs as well as the examples in this article. I have other tests using context and baseMockContext/amendedMockContext, as well as other renderHook tests. they all work fine, but this is my first that uses both in conjunction and it doesn't work...

EDIT:

Here's my AppContext for use in the actual application:

import { createContext, Dispatch, SetStateAction } from "react";
import {
  ConversationDataType,
  FetchResultsType,
  IntroductionDataType,
} from "./types";

export type AppContextType = {
  // a bunch of types
};

export const AppContext = createContext({} as AppContextType);
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda