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.

Probando un componente de React con React Router V6

31 Jul, 2023 Programación

Entiendo que React Testing Library tiene un ejemplo de prueba con react router, pero no pude hacer que funcionara (creo que porque estoy usando react router V6).

Básicamente, necesito hacer pruebas de router porque tengo un componente de detalles que utiliza useParams() para obtener parte de la url. No puedo renderizar el componente sin eso.

Este fue mi intento de hacer que funcionara (sí, la página también necesita Apollo, aunque realmente no necesita redux).

const AllTheProviders = ({children, initialRoutes}) => {
    return (
        <apolloprovider client="{client}">
            <provider store="{store}">
                <memoryrouter>
                    {children}
                </memoryrouter>
            </provider>
        </apolloprovider>
    );
}
const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options})


beforeEach(() => {
    window.history.pushState({}, 'Test page', "/details/url-param-the-component-needs")
    customRender(<app></app>);
});

No sorprendentemente, esto no funcionó. Supongo que window.history.pushState() no funciona para react router V6. Intenté usar useNavigate(), pero eso no funciona fuera de un componente.

Si alguien tiene alguna idea sobre cómo podría hacer que esto funcione, lo apreciaría enormemente.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como React Router V6 es una versión relativamente nueva, es posible que algunos ejemplos y recursos aún no se hayan actualizado para funcionar con ella. Una solución para probar componentes que dependen del gancho useParams() de React Router V6 es crear un contexto simulado que incluya los parámetros de ruta necesarios.

    Aquí tienes un ejemplo de cómo podrías modificar tu componente AllTheProviders para usar un Router personalizado en lugar de MemoryRouter y proporcionar un objeto Route simulado con la propiedad params necesaria:

    import { Router, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';

const AllTheProviders = ({ children, initialPath }) => {
  const history = createMemoryHistory({ initialEntries: [initialPath] });
  const routeParams = { paramId: 'valorSimuladoDelParametro' }; // reemplaza con los valores de parámetro necesarios

  return (
    <apolloprovider client="{client}">
      <provider store="{store}">
        <router history="{history}">
          <route path="/detalles/:paramId" element="{React.cloneElement(children," {routeparams})}=""></route>
        </router>
      </provider>
    </apolloprovider>
  );
};

    Luego, en tu prueba, puedes usar este componente AllTheProviders modificado y proporcionar la ruta inicial como una propiedad:

    beforeEach(() => {
  customRender(<app></app>, { initialPath: "/detalles/url-parametro-que-el-componente-necesita" });
});

    Con esta configuración, tu componente Details debería recibir una propiedad routeParams con el valor simulado que especificaste. Puedes probar que se comporte como se espera bajo esas condiciones.

Comments are closed.