如何在浏览器/Jest+jsdom中编写在线编辑器粘贴集成测试？

方法一：Mock剪贴板API（Jest+jsdom环境） #

在Jest结合jsdom的测试环境中，可直接Mock浏览器剪贴板API绕过安全限制：

1. 提前Mock剪贴板读写方法与paste事件逻辑：

// 测试文件开头添加Mock
Object.defineProperty(navigator, 'clipboard', {
  writable: true,
  value: {
    writeText: jest.fn().mockResolvedValue(undefined),
    readText: jest.fn().mockResolvedValue('test')
  }
});

// 封装模拟粘贴的工具函数
function simulatePasteWithText(text) {
  navigator.clipboard.readText.mockResolvedValue(text);
  const pasteEvent = new ClipboardEvent('paste', {
    clipboardData: {
      getData: (type) => type === 'text/plain' ? text : ''
    }
  });
  document.querySelector('.your-editor-selector').dispatchEvent(pasteEvent);
}

2. 编写符合预期结构的测试代码：

test('Ctrl+V粘贴功能正常', async () => {
  await navigator.clipboard.writeText('test');
  setEditorContent('value:');
  simulatePasteWithText('test');
  expectContent('value:test');
});

test('Ctrl+Shift+V粘贴功能正常', async () => {
  await navigator.clipboard.writeText('test');
  setEditorContent('value:');
  // 若为无格式粘贴，可调整Mock返回纯文本
  simulatePasteWithText('test');
  expectContent('value:test');
});

test('Shift+Ins粘贴功能正常', async () => {
  await navigator.clipboard.writeText('test');
  setEditorContent('value:');
  simulatePasteWithText('test');
  expectContent('value:test');
});

方法二：使用浏览器自动化工具（如Playwright/Cypress） #

这类工具运行在受控真实浏览器环境中，可绕过剪贴板安全限制，更贴近用户实际操作：

以Playwright为例：

test('Ctrl+V粘贴功能正常', async ({ page }) => {
  await page.goto('/your-editor-page');
  await page.fill('.your-editor-selector', 'value:');
  await page.evaluate((text) => navigator.clipboard.writeText(text), 'test');
  await page.keyboard.press('Control+V');
  const content = await page.inputValue('.your-editor-selector');
  expect(content).toBe('value:test');
});

方法三：直接测试粘贴事件处理逻辑 #

提取编辑器核心粘贴处理函数，单独测试核心逻辑：

// 假设编辑器粘贴处理函数为handlePaste
function handlePaste(event) {
  const text = event.clipboardData.getData('text/plain');
  insertTextToEditor(text);
}

// 测试处理函数
test('粘贴处理函数能正确插入文本', () => {
  setEditorContent('value:');
  const mockEvent = {
    clipboardData: {
      getData: jest.fn().mockReturnValue('test')
    }
  };
  handlePaste(mockEvent);
  expectContent('value:test');
});

搭配快捷键绑定的简单验证（如确认Ctrl+V能触发handlePaste），即可完整覆盖测试需求。

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