如何用Jest与React Testing Library Mock ReactPlayer并测试功能？

问题背景 #

ReactPlayer组件自带onStart、onPlay、onEnd等回调方法，测试时若未覆盖这些方法会降低代码覆盖率。以下讲解如何Mock ReactPlayer组件，同时验证播放、暂停功能及相关事件。

1. Mock ReactPlayer组件 #

用Jest的jest.mock直接替换原组件，返回一个可控制的模拟组件，暴露实例方法并支持事件回调：

// 测试文件顶部全局Mock ReactPlayer
jest.mock('react-player', () => {
  const React = require('react');
  return jest.fn(({ onPlay, onPause, onEnd, onStart, ref, ...props }) => {
    // 模拟组件实例的核心方法
    const mockPlay = jest.fn();
    const mockPause = jest.fn();
    
    // 通过useImperativeHandle把方法挂载到ref上，供外部调用
    React.useImperativeHandle(ref, () => ({
      play: mockPlay,
      pause: mockPause,
    }));

    // 返回带测试ID的元素，方便定位
    return <div data-testid="mock-react-player">{props.children}</div>;
  });
});

2. 测试播放/暂停功能 #

通过Mock组件的实例ref，调用play/pause方法，验证方法调用及对应事件触发：

import { render } from '@testing-library/react';
import ReactPlayer from 'react-player';
import PlayerWrapper from './PlayerWrapper'; // 你的业务组件，封装了ReactPlayer

describe('ReactPlayer 核心功能测试', () => {
  it('调用play方法触发onPlay回调', () => {
    const mockOnPlay = jest.fn();
    render(<PlayerWrapper onPlay={mockOnPlay} />);

    // 获取Mock组件的ref实例
    const playerInstance = ReactPlayer.mock.instances[0].ref.current;
    
    // 调用play方法
    playerInstance.play();

    // 验证方法和回调都被触发
    expect(playerInstance.play).toHaveBeenCalledTimes(1);
    expect(mockOnPlay).toHaveBeenCalled();
  });

  it('调用pause方法触发onPause回调', () => {
    const mockOnPause = jest.fn();
    render(<PlayerWrapper onPause={mockOnPause} />);

    const playerInstance = ReactPlayer.mock.instances[0].ref.current;
    playerInstance.pause();

    expect(playerInstance.pause).toHaveBeenCalledTimes(1);
    expect(mockOnPause).toHaveBeenCalled();
  });
});

3. 覆盖onStart、onEnd等事件 #

直接调用Mock组件接收的回调函数，验证业务逻辑是否正确响应：

it('触发onEnd回调', () => {
  const mockOnEnd = jest.fn();
  render(<PlayerWrapper onEnd={mockOnEnd} />);

  // 从Mock的参数中取出onEnd并调用
  ReactPlayer.mock.calls[0][0].onEnd();

  expect(mockOnEnd).toHaveBeenCalled();
});

it('触发onStart回调', () => {
  const mockOnStart = jest.fn();
  render(<PlayerWrapper onStart={mockOnStart} />);

  ReactPlayer.mock.calls[0][0].onStart();

  expect(mockOnStart).toHaveBeenCalled();
});

4. 模拟用户交互触发播放/暂停 #

如果业务组件有播放/暂停按钮，用userEvent模拟用户点击，验证组件行为：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('点击播放按钮触发player.play()', async () => {
  const user = userEvent.setup();
  render(<PlayerWrapper />);

  // 找到播放按钮
  const playBtn = screen.getByRole('button', { name: /播放/i });
  await user.click(playBtn);

  const playerInstance = ReactPlayer.mock.instances[0].ref.current;
  expect(playerInstance.play).toHaveBeenCalled();
});

it('点击暂停按钮触发player.pause()', async () => {
  const user = userEvent.setup();
  render(<PlayerWrapper />);

  const pauseBtn = screen.getByRole('button', { name: /暂停/i });
  await user.click(pauseBtn);

  const playerInstance = ReactPlayer.mock.instances[0].ref.current;
  expect(playerInstance.pause).toHaveBeenCalled();
});

内容的提问来源于stack exchange，提问作者Harsh