JavaScript单元测试中模拟多媒体播放器需创建可控制的mock元素、手动触发事件并替换关键属性方法：先用document.createElement创建video/audio，通过Object.defineProperty设置可写状态属性，再用dispatchEvent触发play、pause等事件，同时mock play()方法返回Promise以模拟异步行为。
在 JavaScript 单元测试中模拟多媒体播放器（如 <video> 或 <audio>）的状态事件（如 play、pause、ended、timeupdate、loadedmetadata 等），核心是**控制 DOM 元素行为 + 手动触发事件 + 替换关键属性/方法**。不需要真实加载媒体，重点是让被测代码能按预期响应状态变化。
1. 创建可控制的 mock 播放器元素
用 document.createElement 创建 video 或 audio 元素，并预先设置好常用只读属性（如 duration、currentTime、paused、ended），再通过 Object.defineProperty 使其可动态更新：
const video = document.createElement('video');
// 初始状态
Object.defineProperty(video, 'paused', { value: true, writable: true });
Object.defineProperty(video, 'ended', { value: false, writable: true });
Object.defineProperty(video, 'currentTime', { value: 0, writable: true });
Object.defineProperty(video, 'duration', { value: 120, writable: true }); // 2分钟
Object.defineProperty(video, 'readyState', { value: 4, writable: true }); // HAVE_ENOUGH_DATA
这样后续测试中就能直接赋值修改状态，比如 video.paused = false，再触发对应事件。
2. 手动触发标准媒体事件
使用 dispatchEvent 模拟浏览器原生行为。注意：必须用 new Event() 或 new CustomEvent()，且事件名要准确（区分大小写）：
立即学习“Java免费学习笔记（深入）”；
video.dispatchEvent(new Event('play'));video.dispatchEvent(new Event('pause'));video.dispatchEvent(new Event('ended'));video.dispatchEvent(new Event('timeupdate'));video.dispatchEvent(new Event('loadedmetadata'));video.dispatchEvent(new Event('canplay'));
若需传递数据（如 timeupdate 中的当前时间），可用 CustomEvent：
video.currentTime = 35.2;
video.dispatchEvent(new CustomEvent('timeupdate', { bubbles: true }));
3. 模拟异步加载与状态流转（如 play() 返回 Promise）
现代浏览器中 video.play() 返回 Promise，成功时 resolve，失败时 reject。测试中可 mock 这个方法：
video.play = jest.fn().mockResolvedValue(); // 成功情况
// 或
video.play = jest.fn().mockRejectedValue(new Error('Playback prevented'));
配合事件触发，可完整模拟一次播放流程：
- 调用
video.play()→ 返回 Promise - Promise resolve 后，手动设
video.paused = false - 触发
play和playing事件 - 稍后设
video.currentTime = 10并触发timeupdate - 最后设
video.ended = true并触发ended
4. 在测试框架中整合（以 Jest 为例）
推荐在 beforeEach 中创建并挂载 mock 元素，在 afterEach 中清理：
let video;
beforeEach(() => {
video = document.createElement('video');
document.body.appendChild(video);
// 设置可写属性
Object.defineProperty(video, 'paused', { value: true, writable: true });
Object.defineProperty(video, 'ended', { value: false, writable: true });
Object.defineProperty(video, 'currentTime', { value: 0, writable: true });
Object.defineProperty(video, 'duration', { value: 100, writable: true });
Object.defineProperty(video, 'readyState', { value: 4, writable: true });
// mock play 方法
video.play = jest.fn().mockResolvedValue();
});
afterEach(() => {
document.body.removeChild(video);
});
然后在具体测试用例中组合状态与事件：
test('should call onPlay when video starts playing', () => {
const onPlay = jest.fn();
video.addEventListener('play', onPlay);
video.paused = false;
video.dispatchEvent(new Event('play'));
expect(onPlay).toHaveBeenCalledTimes(1);
});
不复杂但容易忽略：确保事件监听器在 mock 元素上已注册（不要只 mock 行为而不触发真实事件流），同时注意 currentTime、paused 等属性的同步更新时机——它们通常在事件触发前就应反映新状态，否则逻辑判断会出错。
