Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

114
Views
Test dynamic import in useEffect

I'm trying to test a custom hook I created that dynamically imports @vimeo/player.

Relevant part of useVideoPlayer- hook:

   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]);

This is the test asserting state is set correctly:

 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);
                });

The test succeeds when I import Player non-dynamically, but fail with the dynamic import. What I don't understand is why the methods(on, trigger) are not available on MockPlayer - could someone help me understand? I guess I somehow have to wait until the promise of the dynamic import resolves?

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

Removing await waitForNextUpdate() and adding await waitForValueToChange(() => result.playerRef.current) fixed the issue.

about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!