如何在Jest中模拟粘贴事件？含HTML文本框粘贴事件代码示例

Testing paste events in Jest is straightforward once you know how to simulate the event and validate your handler is triggered. Here's how to do it for your input element:

Prerequisites #

Jest uses JSDom under the hood to simulate the browser DOM, so you don't need extra setup for basic DOM testing. If you're using React or other frameworks, adjust the element selection accordingly, but the core event simulation logic stays similar.

Method 1: Vanilla JSDom Approach #

This uses native browser APIs to create and dispatch the paste event:

describe('Input Paste Event', () => {
  let inputElement;

  beforeEach(() => {
    // Inject your input into the test DOM
    document.body.innerHTML = `
      <input type="text" onpaste="myFunction()" value="Paste something in here">
    `;
    inputElement = document.querySelector('input');

    // Mock your myFunction to track calls
    jest.spyOn(window, 'myFunction').mockImplementation(() => {
      // Optional: Add mock logic if your function does something specific
    });
  });

  afterEach(() => {
    // Clean up mocks after each test
    jest.restoreAllMocks();
  });

  test('triggers myFunction when paste is performed', () => {
    // Create a paste event with clipboard data (optional but useful if your function uses it)
    const pasteEvent = new ClipboardEvent('paste', {
      clipboardData: new DataTransfer(),
      bubbles: true, // Ensure the event propagates if needed
      cancelable: true
    });

    // Add content to the simulated clipboard
    pasteEvent.clipboardData.setData('text/plain', 'Hello, pasted world!');

    // Dispatch the event to the input element
    inputElement.dispatchEvent(pasteEvent);

    // Verify your function was called
    expect(window.myFunction).toHaveBeenCalled();

    // If your function modifies the input value or does other actions, add those assertions too
    // Example: expect(inputElement.value).toBe('Hello, pasted world!');
  });
});

Method 2: Using @testing-library/dom (Simpler) #

If you're using the Testing Library ecosystem, fireEvent.paste simplifies event simulation:

First, install the library if you haven't:

npm install --save-dev @testing-library/dom

Then write your test:

import { fireEvent } from '@testing-library/dom';

describe('Input Paste Event', () => {
  let inputElement;

  beforeEach(() => {
    document.body.innerHTML = `
      <input type="text" onpaste="myFunction()" value="Paste something in here">
    `;
    inputElement = document.querySelector('input');
    jest.spyOn(window, 'myFunction').mockImplementation(() => {});
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  test('triggers myFunction on paste', () => {
    // Simulate paste with clipboard data
    fireEvent.paste(inputElement, {
      clipboardData: {
        getData: () => 'Hello, pasted world!'
      }
    });

    // Assert the function was called
    expect(window.myFunction).toHaveBeenCalled();
  });
});

Key Notes: #

• Mocking the Handler: We use jest.spyOn to track if myFunction is called. If your function is part of a module instead of a global, adjust the import and spying accordingly.
• Clipboard Data: If your myFunction reads from the clipboard, make sure to include the clipboardData property in the event so your function can access it.
• Cleanup: Always restore mocks in afterEach to prevent test pollution between runs.

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