React Jest & React Testing Library, Writing test for Video player (play and pause) - reactjs

Question

I am using <ReactPlayer/> as part of my project, it gives you <video /> in HTML
I want to write the test cases for this.
To write test case, without using autoPlay I play the video manually so I have to write a test case for play and pause event of <ReactPlayer/> or <video />
Is there any way to write test case for event of "Play"
Thanks in advance

Answer 1

I coincidentally was working through the a similar challenge with this library. For me, this kind of ended up being a pain in the ass to work out because I was trying to test custom code using their on events (i.e. onPlay or onStart).
Given the information you provided, you shouldn't need to test the player itself. It's a third party library and they have their own test coverage that handles the functionality of the player.
As for me, trying to navigate how it all worked from an implementation standpoint seemed like a bad idea, so I ended up mocking the whole player out. I was trying to test that my code was being called on an onStart event, so I made sure my mock would handle that from the props:
// mock.jsx
jest.mock('react-player/file', () => (p) => {
const props = { ...p }
delete props.onStart
return (<div {...props} playing={p.playing.toString()} onClick={p.onStart} />)
});
// component.jsx
import React from 'react';
import tracking from 'tracking';
import ReactPlayer from 'react-player/file';
const TheVideoPlayer = () => {
const trackTheVideoPlayer = () => {
tracking.trackEvent('foo', { bar: 'baz' })
}
return (
<ReactPlayer
className={styles.theVideoPlayer}
data-testid="the-video-player"
light={backgroundSrc}
url={theVideoUrl()}
onStart={trackTheVideoPlayer}
playing
/>
)
}
// test.jsx
import { fireEvent, render, screen } from 'app/utils/test-utils';
import React from 'react';
import TheVideoPlayer from './TheVideoPlayer';
import tracking from 'tracking';
const mockTracking = { trackEvent: jest.fn() };
jest.spyOn(tracking, 'track').mockReturnValue(mockTracking);
describe('the video player', () => {
const createComponent = () => render(<TheVideoPlayer />);
describe('on start', () => {
it('Fires tracking Event', async () => {
createComponent();
const mockTrackProperties = { bar: 'baz' }
fireEvent.click(screen.getByTestId('video-player'))
expect(trackEvent).toBeCalledWith('foo', mockTrackProperties);
});
});
Since js-dom doesn't have a onStart event handler, I ended up using onClick and simulating a click. I also had to type cast the "playing" boolean to a string because jsDOM was giving a console error (but tests were passing). This doesn't feel particularly good or clean, but it does ensure that my code is being tested in an "onStart" event, however that is implemented in the library.