如何在Jest测试中获取剪贴板复制文本（React项目）

要测试你的FileLoader组件复制到剪贴板的内容是否符合预期，你可以通过Mock浏览器的navigator.clipboard API来捕获复制的文本，或者直接验证剪贴板写入方法的调用参数。以下是具体的实现步骤和完整测试代码：

核心思路 #

react-use-clipboard库内部其实是调用了浏览器原生的navigator.clipboard.writeText()方法来完成复制操作。所以我们可以在Jest测试环境中Mock这个方法，这样就能轻松获取到组件尝试复制的文本内容，进而和预期值比对。

完整测试代码 #

import { render, screen } from '@testing-library/react';
import React from 'react';
import userEvent from '@testing-library/user-event';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import FileLoader from '../src/components/FileLoader/FileLoader';

describe('save buttons', () => {
  const initialState = { png: 'some_img_url' };
  const mockStore = configureStore();
  let store;

  // 在每个测试前Mock剪贴板API
  beforeEach(() => {
    global.navigator.clipboard = {
      writeText: jest.fn(), // Mock writeText方法，跟踪调用情况
    };
    store = mockStore(initialState);
  });

  // 测试后清理Mock，避免干扰其他测试
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('should copy the correct HTML to clipboard when Save button is clicked', async () => {
    render(<Provider store={store}><FileLoader /></Provider>);
    
    // 获取Save按钮（注意组件内的按钮文本是"Save"，不是你之前写的"html"）
    const saveBtn = await screen.findByText('Save');
    // 模拟用户点击按钮操作
    await userEvent.click(saveBtn);

    // 验证剪贴板写入方法的调用参数是否符合预期
    expect(global.navigator.clipboard.writeText).toHaveBeenCalledWith(
      '<img src="some_img_url" alt="banner" />'
    );
  });
});

关键细节解释 #

• Mock剪贴板API：在beforeEach中给global.navigator.clipboard添加Mock的writeText方法，用jest.fn()创建可以跟踪它的调用次数和传入参数，测试后清理Mock保证测试独立性。
• 异步操作处理：screen.findByText和userEvent.click都是异步操作，必须用await等待完成，否则会出现断言时机错误的问题。
• 断言逻辑：通过toHaveBeenCalledWith直接验证写入剪贴板的内容是否和我们预期的HTML字符串一致，这就足够确认组件的复制功能是否正常工作。

如果你需要直接读取剪贴板内容（比如特殊场景下要确认内容确实被写入），也可以Mocknavigator.clipboard.readText()并返回预设值，但对这个场景来说，验证writeText的调用参数已经足够准确高效。

内容的提问来源于stack exchange，提问作者evgeniya.osmakova