reactjs - React Jest & React 测试库，为视频播放器编写测试（播放和暂停）

Question

我正在使用<ReactPlayer/>作为我项目的一部分，它给了你<video /> in HTML

我想为此编写测试用例。

要编写测试用例，without使用autoPlayIplay所以video manually我必须编写一个test caseforplay和pause事件<ReactPlayer/>or<video />

有什么方法可以编写测试用例event of "Play"

提前致谢

Answer 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”事件中进行测试，但是这是在库中实现的。