Shaka Player在Jest+React Testing Library测试中报错如何解决

方案1：Mock ShakaPlayer组件（单元测试首选，推荐） #

如果你的测试目标是验证页面业务逻辑（比如示例中Init按钮是否可见），不需要校验播放器本身的播放能力，直接Mock整个组件即可从根源规避底层依赖缺失问题。
在jest全局配置文件（通常为jest.setup.js或jest.setup.ts）中添加如下代码：

import React from 'react';

jest.mock('shaka-player-react', () => {
  return function MockShakaPlayer(props) {
    // 透传所有props，返回模拟video元素，不执行shaka底层逻辑
    return <video data-testid="shaka-player-mock" {...props} />;
  };
});

修改完成后重新运行测试即可，不会再触发shaka相关报错。

方案2：补全jsdom缺失的API（需测试部分播放器交互逻辑时使用） #

如果测试用例需要验证和播放器相关的交互逻辑，不想全量mock组件，可以在jest全局配置中补全shaka依赖的浏览器API，步骤如下：

1. 确认jest.config.js中测试环境配置为jsdom：

module.exports = {
  testEnvironment: 'jsdom',
  // 其余配置项
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};

2. 在jest.setup.js中添加如下polyfill代码：

// 补全EME加密相关API
if (!window.navigator.requestMediaKeySystemAccess) {
  window.navigator.requestMediaKeySystemAccess = jest.fn().mockResolvedValue({
    createMediaKeys: jest.fn().mockResolvedValue({
      createSession: jest.fn().mockReturnValue({
        generateRequest: jest.fn().mockResolvedValue(),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn()
      }),
      setServerCertificate: jest.fn().mockResolvedValue(true)
    })
  });
}

// 补全MediaCapabilities API
if (!window.mediaCapabilities) {
  window.mediaCapabilities = {
    decodingInfo: jest.fn().mockResolvedValue({
      supported: true,
      smooth: true,
      powerEfficient: true
    })
  };
}

// 补全媒体元素的事件监听方法，解决addEventListener报错
Object.defineProperties(HTMLMediaElement.prototype, {
  addEventListener: { value: jest.fn(), writable: true },
  removeEventListener: { value: jest.fn(), writable: true },
  canPlayType: { value: jest.fn(() => 'probably'), writable: true }
});

方案3：换用真实浏览器环境测试（集成/端到端测试首选） #

如果需要完整验证播放器的播放、加密、控制等全链路逻辑，建议改用Playwright、Cypress等端到端测试工具，这类工具基于真实Chromium内核运行，不存在浏览器API缺失问题，无需额外配置即可正常运行Shaka Player。

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