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.
Eliminar await waitForNextUpdate() y agregar await waitForValueToChange(() => result.playerRef.current) solucionó el problema.