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.

¿Cómo puedo pasar el proveedor utilizado en el hook a las pruebas Jest/Enzyme?

Tengo varios componentes donde agregué un analyticsProvider para realizar un seguimiento del uso. En cada uno de estos, estoy utilizando un gancho useEffect e importando useAnalytics:

import { useAnalytics } from '@framework/component-analytics';

<p>const { trackView } = useAnalytics();</p>

<p>useEffect(() => {
    trackView('/liveTraffic', 'liveTrafficPage');
  }, [trackView]);

También tengo un AnalyticsProvider en la raíz de la aplicación que pasa toda la configuración necesaria a los consumidores secundarios (es decir, useAnalytics).

Me encuentro con un problema al ejecutar pruebas: ”useAnalytics’ debe ser llamado desde dentro de un ‘&#lt;AnalyticsProvider&#gt;’, o se le debe proporcionar un argumento de ‘eventManagerConfiguration’.

¿Cuál es la mejor manera de pasar el componente necesario y la configuración relacionada en mis pruebas? Soy bastante nuevo en React y estoy luchando por averiguar qué usar. He intentado envolver los componentes pero no está funcionando.


describe('no tiene elementos de lista en vivo de tráfico', () => {
const component = shallow(analyticsWrapper());
it('NO debería renderizar LiveTrafficListing', () => {
expect(component.update().find(LiveTrafficListing).length).toEqual(0);
});
});

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para solucionar este problema, puedes envolver tu componente con <analyticsprovider> en tu archivo de prueba. Esto proporcionará la configuración necesaria para que el gancho useAnalytics funcione correctamente:

    import { AnalyticsProvider } from '@framework/component-analytics';
    
    describe('no tiene elementos de lista de tráfico en vivo', () => {
      const component = shallow(
        <analyticsprovider>
          <livetrafficpage {...props}=""></livetrafficpage>
        </analyticsprovider>
      );
      it('NO debe renderizar LiveTrafficListing', () => {
        expect(component.update().find(LiveTrafficListing).length).toEqual(0);
      });
    });
    

    Al envolver tu componente en <analyticsprovider>, estás proporcionando la configuración necesaria para que el gancho useAnalytics funcione correctamente, y tus pruebas ahora deberían ejecutarse sin errores.

Comments are closed.