React Jest 和 React 测试库，为视频播放器编写测试（播放和暂停）答案

【问题标题】：React Jest & React Testing Library, Writing test for Video player (play and pause)React Jest 和 React 测试库，为视频播放器编写测试（播放和暂停）
【发布时间】：2021-12-29 06:40:50
【问题描述】：

我在项目中使用<ReactPlayer/>，它为您提供<video /> in HTML

我想为此编写测试用例。

要编写测试用例，without 使用 autoPlay 我 play video manually 所以我必须为 play 和 pause 编写 test case 事件 <ReactPlayer/> 或 <video />

有没有办法为event of "Play"编写测试用例

提前致谢

【问题讨论】：

请提供代码。 mvce

标签： reactjs jestjs html5-video react-testing-library react-testing

【解决方案1】：

巧合的是，我正在处理与这个库类似的挑战。对我来说，这种解决方法最终会让人头疼，因为我试图使用他们的on 事件（即onPlay 或onStart）来测试自定义代码。

鉴于您提供的信息，您不需要测试播放器本身。这是一个第三方库，他们有自己的测试覆盖范围来处理播放器的功能。

对我来说，试图从实现的角度了解它是如何工作的似乎是个坏主意，所以我最终嘲笑了整个播放器。我试图测试我的代码是否在 onStart 事件上被调用，所以我确保我的模拟能够从道具处理它：

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

由于 js-dom 没有 onStart 事件处理程序，我最终使用 onClick 并模拟点击。我还必须将“正在播放”的布尔值类型转换为字符串，因为 jsDOM 给出了控制台错误（但测试通过了）。这感觉不是特别好或干净，但它确实确保我的代码正在“onStart”事件中进行测试，但是这是在库中实现的。

【讨论】：