Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

117
Vistas
Probar importación dinámica en useEffect

Estoy tratando de probar un enlace personalizado que creé que importa dinámicamente @vimeo/player .

Parte relevante de useVideoPlayer - gancho:

 useEffect(() => { async function setup() { const { default: Player } = await import('@vimeo/player'); playerRef.current = new Player( playerRef.current, playerConfig, ); playerRef.current.on('loaded', () => setIsLoading(false)); playerRef.current.getVideoTitle().then((t) => setTitle(t)).catch(handleErrorCallback); } if (playerRef?.current) { setup(); } return () => playerRef.current.destroy && playerRef.current.destroy(); }, [playerRef]);

Esta es la prueba que afirma que el estado está configurado correctamente:

 jest.mock('@vimeo/player', () => class MockPlayer { constructor() { this.events = new Map(); } on(event, handler) { this.events[event] = handler; } trigger(event) { this.events[event](); } getVideoTitle() { return Promise.resolve('title.mp4'); } destroy() { return jest.fn(); } }); ... test.each([ ['loaded', 'isLoading', true, false], ['bufferstart', 'isBuffering', false, true], ['play', 'isPlaying', false, true], ])('event: %s should set state: %s from %s to %s', async (event, state, valueBefore, valueAfter) => { const { result, waitForNextUpdate } = renderHook(useVideoPlayer, { initialProps: { playerRef: ref, playerConfig }, }); console.log(result.current.playerRef.current); /* MockPlayer { events: Map(0) { loaded: [Function (anonymous)], bufferstart: [Function (anonymous)], bufferend: [Function (anonymous)], play: [Function (anonymous)], pause: [Function (anonymous)], timeupdate: [Function (anonymous)] } } */ expect(result.current[state]).toEqual(valueBefore); act(() => { result.current.playerRef.current.trigger(event); }); await waitForNextUpdate(); // need both, act and waitForNextUpdate to get rid of warnings expect(result.current[state]).toEqual(valueAfter); });

La prueba tiene éxito cuando importo Player de forma no dinámica, pero falla con la importación dinámica. Lo que no entiendo es por qué los métodos ( on , trigger ) no están disponibles en MockPlayer . ¿Alguien podría ayudarme a entender? Supongo que de alguna manera tengo que esperar hasta que se resuelva la promesa de la importación dinámica.

about 4 years ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

Eliminar await waitForNextUpdate() y agregar await waitForValueToChange(() => result.playerRef.current) solucionó el problema.

about 4 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda