es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React router – useOutletContext testing React router: prueba de uso del contexto del punto de venta

React router – useOutletContext testing React router: prueba de uso del contexto del punto de venta

29 Jul, 2023 Programación

Estoy usando react-router V6 y estoy intentando probar la nueva función de useOutletContext.
Mi biblioteca de pruebas es testing-library/react y no estoy seguro de cómo pasar los datos de contexto en la prueba.

En el componente TSX, obtengo los datos con el gancho de react-router:

const { data } = useOutletContext<icontext>()

Necesito algo como esto:

test("render outlet context data view", async () => {
  const { getByTestId } = render(
    <mockedprovider mocks="{[mockData]}" context="{myContextData}">
      <contextdataview></contextdataview>
    </mockedprovider>
  )
})

La etiqueta MockedProvider es de @apollo/client/testing.

La parte context={myContextData} es lo que necesito.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar los datos de contexto en el test, simplemente puedes proporcionar el objeto de contexto como una prop para el componente MockedProvider. En tu ejemplo, reemplazarías la variable myContextData por el objeto de contexto real que deseas pasar.

    Aquí está el código de prueba actualizado:

    test("renderizar vista de datos de contexto", async () => {
  const myContextData = { /* tus datos de contexto */ };

  const { getByTestId } = render(
    <mockedprovider mocks="{[mockData]}" context="{myContextData}">
      <contextdataview></contextdataview>
    </mockedprovider>
  );

  // ...tus afirmaciones
});

    Esto debería permitir que el hook useOutletContext recupere los datos de contexto en tu componente.

Comments are closed.