Как смоделировать событие onPast с помощью React и Jest? - PullRequest
Новая
       5

Как смоделировать событие onPast с помощью React и Jest?

0 голосов
/ 02 марта 2020

Я пытаюсь смоделировать событие вставки с помощью JEST-теста для моего реактивного проекта.

У меня есть внешний компонент "Приложение", в котором есть поле ввода с событием "onPaste", и я хотел бы проверить в прошлые данные и проверьте входное значение. 

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"} });
});

В моем компоненте я вызываю событие clipboardData: 

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

Когда я выполняю свой тест, возникает ошибка, потому что

TypeError: pasteDatas.getData не является функцией.

Как я могу смоделировать данные событий буфера обмена и получить входное значение в моем тесте JEST?

Спасибо за ваше ответы.

1 Ответ

0 голосов
/ 03 марта 2020

Вот решение для юнит-теста:

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');
  });
});

Результаты юнит-теста с отчетом о покрытии: 

 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

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60492514

...