如何使用 React 和 Jest 模拟 onPaste 事件?

2024-05-27

我正在尝试在我的反应项目上使用 JEST 测试来模拟粘贴事件。

我有一个外部组件“App”,其中包含带有“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");

当我执行测试时,出现错误,因为

类型错误:pasteDatas.getData 不是函数。

我如何模拟剪贴板事件数据并在 JEST 测试中获取输入值?

感谢您的回复。


这是单元测试解决方案:

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 https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60492514

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 React 和 Jest 模拟 onPaste 事件? 的相关文章

随机推荐

  • WinForm面板滚动没有滚动条?

    我正在创建一个基本上是一个面板的用户控件 内部有随机内容 并且我需要能够使用按钮 向上和向下 而不是滚动条来上下滚动该面板 我必须这样做的原因是因为该程序将在触摸屏显示器上使用 我们需要大按钮而不是丑陋的小滚动条 我一直在摆弄 Vertic
  • Scala - lambda 参数可以匹配元组吗?

    所以说我有一些清单 比如 val l List 1 blue 5 red 2 green 然后我想过滤掉其中一个 我可以做类似的事情 val m l filter item gt val n s item unpack the tuple
  • 提高 Pandas 合并性能

    正如其他帖子所建议的那样 我特别没有 Pandas Merge 的性能问题 但我有一个类 其中有很多方法 可以对数据集进行大量合并 该类有大约 10 个 group by 和大约 15 个 merge 虽然 groupby 相当快 但在类的
  • C语言中的“宽字符串”是什么?

    我在书中看到这样一句话 wscanf L lf variable 其中第一个参数的类型为wchar t 这不同于scanf lf variable 其中第一个参数的类型为char 那么比起来有什么区别呢 我以前从未听说过 宽字符串 我听说过
  • 为什么我们(必须)使用不同的启动器图标(xhdpi、hdpi 等)

    我想知道 为什么我们在 android 中使用不同的启动器图标 大小 目前您 必须 将图标大小调整为 LDPI 36 x 36 MDPI 48 x 48 HDPI 72 x 72 XHDPI 96 x 96 并将它们放入所需的文件夹中 但是
  • 如何在 PySimpleGUIQt 中实现复选框功能?

    我正在尝试用 Python 创建一个简单的 GUI 程序 我将在创建新项目时使用它 我想要一个用于项目类型 python web 等 的复选框功能 然后是项目名称的输入框 目录名称是什么 import os import PySimpleG
  • Python - 在大型数据集上计算多项概率密度函数?

    我原本打算使用 MATLAB 来解决这个问题 但内置函数有局限性 不适合我的目标 NumPy 中也存在同样的限制 我有两个制表符分隔的文件 第一个是显示内部蛋白质结构数据库的氨基酸残基 频率和计数的文件 即 A 0 25 1 S 0 25
  • iOS 联系人 如何通过电话号码获取联系人

    我只想通过电话号码获取联系人姓名 我尝试过这个 但速度太慢 CPU 速度超过 120 let contactStore CNContactStore let keys CNContactGivenNameKey CNContactFamil
  • 在 matplotlib 中用圆裁剪三角形

    我想画一个三角形 但其中一条边需要是圆弧段 该示例不起作用 需要删除圆圈外的所有蓝色 可以直接完成此操作 而无需自己计算整个轮廓吗 谢谢你 import matplotlib pyplot as plt fig plt figure ax
  • 在 Ubuntu 上安装软件包需要很长时间

    我之前使用 Windows 作为操作系统 RStudio 用于 Windows 今天切换到 Ubuntu 并再次安装了 R 和 RStudio 当我尝试从 CRAN 安装一些软件包时 仅tidyverse 使用install package
  • 按索引偶数或奇数将数组拆分为两个数组

    我有这个数组 array array a b c d e f g 我想根据索引是偶数还是奇数将其分成两个数组 如下所示 odd array a c e g even array b d f 提前致谢 一种解决方案 使用匿名函数和array
  • 在 JSP 中从 JavaScript/jQuery 调用后端 Java 方法

    我有一个 JSP 其中有一个select包含实体种类名称的列表 当我选择一个实体类型时 我需要填充另一个实体类型select包含所选实体类型的字段名称的列表 为此 我调用了一个 JavaScript 函数onchange event 在 J
  • ios 无法将图片上传到服务器

    您好 我正在尝试将图像从我的 IOS 设备上传到服务器 这是我上传图像的代码 IBAction btnUpload id sender if self imageViewGallery image nil UIAlertView Error
  • Spring Security SAML:让 块出现在

    我很难让 Spring Security SAML 与 ADFS 2 0 一起使用 根据我当前的配置 生成的AuthnRequest看起来像这样
  • 如何使自定义对话框透明?

    我需要使我的自定义对话框透明 我怎样才能做到这一点 您还可以在构造函数中使用以下行 getWindow setBackgroundDrawable new ColorDrawable 0
  • 未使用 form_with 显示时出错

    早上好 我正在按照教程进行操作http edgeguides rubyonrails org getting started html http edgeguides rubyonrails org getting started html
  • 如何缩放 CAShapeLayer

    我很快就成功制作了动画bezier path它包含在一个CAShapeLayer 我唯一的问题是将其实现到其他屏幕尺寸上 有谁知道我如何扩展CAShapeLayer里面有路径吗 即使其变为原始大小的一半 使用这个函数 var shapela
  • 将 1d 数组索引转换为 3d 数组索引?

    我有一个 int 我想将其转换为 3d 数组索引的 3 个 int 这是我正在处理的示例 byte array new byte XSize YSize ZSize int i 0 other code array cur other co
  • 使用 NXP 读卡器库读取 NFC Mifare 卡

    我正在尝试使用 NFC 读卡器库读取 Mifare Ultralight 卡的内容 我对 NFC 完全陌生 正在使用这个 github 存储库 https github com JohnMcLear NXP Raspberry Pi Car
  • 如何使用 React 和 Jest 模拟 onPaste 事件?

    我正在尝试在我的反应项目上使用 JEST 测试来模拟粘贴事件 我有一个外部组件 App 其中包含带有 onPaste 事件的输入字段 我想测试过去的数据并检查输入值 it on past with small code gt Create