I'm trying to simulate paste event with a JEST test on my react project.

I have an external ponent "App" witch contain the input field with "onPaste" event and I would like to test to past data and check the input value.

it("on past with small code", () => {

// Create new Security Code module
const wrapper = mount(<CodeVerification />);

const element = wrapper.find(".code-verification .code input");
const element1 = element.first();
element1.simulate("paste", { clipboardData: {value: "12"} });
});

In my ponent, i call clipboardData event :

const pasteDatas = pastEvent.clipboardData || window.clipboardData;
const paste = pasteDatas.getData("text");

When I execute my test, there is an error because

TypeError: pasteDatas.getData is not a function.

How can i mock clipboard event data and get input value in my JEST test ?

Thanks for yours responses.

I'm trying to simulate paste event with a JEST test on my react project.

I have an external ponent "App" witch contain the input field with "onPaste" event and I would like to test to past data and check the input value.

it("on past with small code", () => {

// Create new Security Code module
const wrapper = mount(<CodeVerification />);

const element = wrapper.find(".code-verification .code input");
const element1 = element.first();
element1.simulate("paste", { clipboardData: {value: "12"} });
});

In my ponent, i call clipboardData event :

const pasteDatas = pastEvent.clipboardData || window.clipboardData;
const paste = pasteDatas.getData("text");

When I execute my test, there is an error because

TypeError: pasteDatas.getData is not a function.

How can i mock clipboard event data and get input value in my JEST test ?

Thanks for yours responses.

• javascript
• reactjs
• unit-testing
• jestjs
• enzyme

2 Answers 2

Here is the unit test solution:

index.tsx:

import React, { Component } from 'react';

class CodeVerification extends Component {
  constructor(props) {
    super(props);
    this.handlePaste = this.handlePaste.bind(this);
  }
  handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
    const pasteDatas = event.clipboardData || (window as any).clipboardData;
    const text = pasteDatas.getData('text');
    console.log(text);
  }
  render() {
    return (
      <div>
        <input type="text" onPaste={this.handlePaste} />
      </div>
    );
  }
}

export default CodeVerification;

index.test.tsx:

import CodeVerification from './';
import { mount } from 'enzyme';
import React from 'react';

describe('60492514', () => {
  it('should handle paste event', () => {
    const wrapper = mount(<CodeVerification></CodeVerification>);
    const logSpy = jest.spyOn(console, 'log');
    const mEvent = { clipboardData: { getData: jest.fn().mockReturnValueOnce('12') } };
    wrapper.find('input').simulate('paste', mEvent);
    expect(mEvent.clipboardData.getData).toBeCalledWith('text');
    expect(logSpy).toBeCalledWith('12');
  });
});

Unit test results with coverage report:

 PASS  stackoverflow/60492514/index.test.tsx
  60492514
    ✓ should handle paste event (49ms)

  console.log node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866
    12

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |       75 |     100 |     100 |                   
 index.tsx |     100 |       75 |     100 |     100 | 9                 
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.837s, estimated 10s

source code: https://github./mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60492514

Use element1.simulate("paste", { clipboardData: { getData: jest.fn(), value: "12" }}); instead of element1.simulate("paste", { clipboardData: {value: "12"} });