Cypress Vue 组件测试从已挂载发出的事件

2024-04-29

我有一个 vue2 组件,它在其安装的生命周期挂钩中发出一个事件。该事件被发出,并且可以由使用该组件的页面处理。但是,我还想测试该事件是否在我的组件测试中发出,该测试使用赛普拉斯组件测试运行程序。这是一个精简版本...组件:

TheComponent = {
    template: `
        <div data-cy="the-component">
        
        </div>`, 
    data() {
        return {

        }
    },
    mounted() {
        this.$emit('the-event')
    },
}

和测试:

describe('Test', () => {
    it('emits an event when mounted', () => {   
        const spy = cy.spy()
        mount(TheComponent)
        .then(() => {
            Cypress.vue.$on('the-event', spy)
        })
        .then(() => {            
            expect(spy).to.be.calledOnce
        })
    })
})

问题是 Cypress.vue 对象只有在组件安装后才会创建。但间谍必须在 Cypress.vue 对象上注册。所以当它按照上面的方式注册时,挂载的钩子已经运行了,并且间谍没有被调用。

我错过了什么吗?

是否有另一种方法可以让我测试事件是否是从 Mounted 发出的?


Cypress mount()与 Vue-Test-Utils 具有相同的 APImount(),所以你可以添加听众 https://vue-test-utils.vuejs.org/api/options.html#listeners到安装选项

const spy = cy.spy()
mount(HelloWorld, {
  listeners: {
    'the-event': spy
  }
})
.then(() => {
  expect(spy).to.be.calledOnce
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cypress Vue 组件测试从已挂载发出的事件 的相关文章

  • 跟踪滚动位置并通知其他组件

    有没有一种简单的方法来跟踪浏览器滚动位置并通知多个组件 用例 在滚动时 我希望能够根据我所在的位置更改页面上各种元素的类 在 Angular 的早期版本中 通过插件可以实现这一点 对于 jQuery 也是如此 当然 可以选择编写裸 JS 在
  • Javascript dispatchEvent click 在 IE9 和 IE10 中不起作用

    我正在尝试在 ExtJs 中构建应用程序时模拟鼠标事件 例如单击 鼠标悬停等 我使用下面的代码来模拟点击 function triggerEvent element eventName if document createEvent var
  • 如何同时订阅引发的事件和打印?

    我一直在开发一个程序 该程序有 3 个类 其中 2 个类具有以不同间隔重复的计时器 一旦计时器的一个 周期 完成 它就会引发一个带有字符串作为返回的事件 第三类订阅来自其他两个计时器类的事件并将它们打印到屏幕上 效果很好 但我的问题是它是分
  • npm run dev 和 npm run production 之间的区别

    我对 Laravel 和 vue js 很陌生 请让我知道它们之间有什么区别npm run dev and npm run production 这和环境有关系吗 npm run dev创建源映射并且不会缩小 js css 这使得调试和查找
  • 以跨浏览器兼容的方式触发 onresize

    我想从后面的 C 代码触发 onresize 事件 我认为这可以完成 Page clientScript RegisterScriptBlock this getType id javascript code 我尝试过 element on
  • 如何将参数传递给事件? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我的一些变量没有在每次方法调用时被序
  • ZF2 查看攻略

    我正在尝试执行以下操作 简单的控制器和动作 Action 应根据请求返回 2 种类型的响应 HTML in case of ordinary request text html JSON in case of ajax request ap
  • 是否可以删除Android日历事件

    我正在使用 Android 日历 如何使用代码删除日历事件 是否可以 为了澄清起见 我想提一下 我不想要同步过程或想要使用 gdata api 删除事件 我只想删除本地日历事件 尝试使用事件 ID 的 Uri 删除事件 Uri uri UR
  • 有没有V型斗篷的反面?

    根据VueJS 文档 https v2 vuejs org v2 api v cloak v cloak 指令可用于隐藏未编译的 Mustache 绑定 直到 Vue 实例准备就绪 换句话说 我可以隐藏一个div或类似的东西 当 vue 准
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • 个人Vue 3组件包缺少模板或渲染函数

    我最近将自己的 Vue 3 组件上传到 NPM 以供其他人使用 当在其他项目中使用它时 它会发出以下警告 Vue warn Component is missing template or render function at
  • 是否有用于事件驱动的 Kafka 消费者的 Python API?

    我一直在尝试构建一个以 Kafka 作为唯一界面的 Flask 应用程序 因此 我希望有一个 Kafka 消费者 当相关主题的流中存在新消息时 该消费者会被触发 并通过将消息推回到 Kafka 流来进行响应 我一直在寻找类似 Spring
  • Java - 创建自定义事件和侦听器

    我正在尝试用 Java 创建自定义事件和侦听器 我已经看过这些文章和问题 在 Java 中创建自定义事件 https stackoverflow com questions 6270132 create a custom event in
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • 每次调用新方法时触发事件

    我正在做一个logger for a c 应用程序需要记录每个方法被调用的时间以及每个方法执行时间 我可以通过调用自己的方法来做到这一点EventLogger LogMethodCall方法在每个方法的开头 但我想知道是否有办法使CLR每次
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 列表视图上的 TextBlock:如何忽略 TextBlock 中的点击并让列表视图处理它们

    我有一个显示大量信息的列表视图 但是当它为空时 我想在其上覆盖一个文本块 上面写着 没有要显示的信息 或 bla bla bla 添加信息 列表视图设置为响应鼠标单击 但现在如果我单击文本块 这些事件将路由到文本块 我怎样才能让这些事件转到
  • 如何在RobotFramework中进行多行测试设置或拆卸而不创建新关键字?

    我需要在测试用例中调用两个拆卸关键字 但不能为此创建新关键字 我很有趣 如果有这样的关键字语法 例如文档或循环 Documentation line1 line2 line3 使用 运行关键词 http robotframework org
  • 在渲染组件之前从 api 获取数据

    我在渲染页面之前发送 2 个 api 请求 const Profile template profile attributes null photos data function return attributes Profile attr

随机推荐

  • 在 Android 中下载文件

    我正在使用以下代码在 Android 中下载文件 public class FileDownloadActivity extends Activity ProgressDialog mProgressDialog Called when t
  • 将正在运行的计数显示计时器添加到 iOS 应用程序中,例如时钟秒表?

    我正在使用一个应用程序 该应用程序可以处理设备运动事件并以 5 秒的增量更新界面 我想向应用程序添加一个指示器 以显示应用程序运行的总时间 看起来像秒表的计数器 例如本机 iOS 时钟应用程序 是计算应用程序运行时间并将其显示给用户的合理方
  • 如何在 javascript 中使用 .net 资源文件

    无论如何 我可以在 javascript 中访问我的资源文件 resx 吗 如果没有 那么是否有任何解决方法可以用不同语言的 javascript 显示消息 如果您的 javascript 在页面中 您可以使用 var globalReso
  • 如何删除字符串中所有不可打印的字符?

    我想我需要删除字符 0 31 和 127 是否有一个函数或一段代码可以有效地完成此操作 7 位 ASCII 如果您的 Tardis 于 1963 年刚刚上市 并且您只想要 7 位可打印 ASCII 字符 则可以使用以下命令删除 0 31 和
  • android:configChanges 清单文件中不允许错误字符串类型

    这是我的清单文件 其中显示 android configChanges 不允许的错误字符串类型 请帮助我纠正错误 下面是我的清单文件
  • 选择文件夹后 QFileDialog::getExistingDirectory 不关闭

    In Qt QFileDialog dlg new QFileDialog QDir dir dlg gt getExistingDirectory this tr Choose folder qgetenv HOME 打开文件夹选择对话框
  • 获得独特价值的最佳方式

    我正在使用 Google Appengine NDB 我试图从数据库中获取不同的值 但它不起作用 Now my code is query set cls query order cls ls Getting ordered queries
  • iPhone 6 收不到推送通知

    我正在尝试向在 iOS 8 上运行的应用程序发送推送通知 我有两个设备 一台是运行 iOS 8 的 iPad 2 另一台是 iPhone 6 在两个设备上运行完全相同的应用程序 我使用相同的 php 脚本发送推送通知 我正在使用以下 Obj
  • lua_resume 的 from 参数的含义

    From Lua 5 2 参考手册 http www lua org manual 5 2 manual html lua resume int lua resume lua State L lua State from int nargs
  • 如何修改道路网络的 L 系统?

    向大家问好 我目前正在研究道路网络的程序生成 并偶然发现了 L 系统算法 根据我从有关该主题的各种科学论文以及有关该主题的论文的进一步论文中了解到 算法更改为使用 全局目标和局部约束 其中修改所采取的路径以适应地形等输入值和人口密度 现在我
  • 不使用 renderInContext 捕获 UIView:

    我想从我的屏幕创建视频 为此我将捕获视图 但我不想使用renderInContext 由于某种原因 我现在正在使用drawViewHierarchyInRect 但这仅限于 iOS 7 我的应用程序也支持早期的 iO S 版本 我会因使用而
  • UIViewController 中的 Xcode 5.1 UITableView - 自定义 TableViewCell 出口为零

    我有一个 UITableView 作为 UIViewController 中的子视图 我没有使用 UITableViewController 因为我有一些与 tableview 无关的其他内容占据了屏幕的一部分 我正在使用故事板 我将表视图
  • 公开 ASP.NET 用户控件中的复杂属性

    我想从自定义 ASP NET 用户控件公开一个复杂的属性 可以通过aspx页面中的控制标签来设置 像这样的事情 public class TestData public int X public int Y public partial c
  • 阅读 C 语言中的科学记数法

    我正在尝试读取包含以下内容的文件 1 0000000e 01 2 9265380e 03 5 0821200e 02 4 3231640e 01 2 0000000e 01 1 0170240e 04 9 2798610e 02 4 072
  • 无损连接属性

    关系模式中的无损连接属性是什么意思 是否能够在关系分解过程中保持信息 数据的语义 同时进行规范化 The 无损连接属性是归一化支持的分解特征 它能够确保原始关系的任何实例都可以从较小关系中的相应实例中识别出来
  • 消费者关闭了输入通道或发生错误。事件=0x8

    D AndroidRuntime 11752 D AndroidRuntime 11752 gt gt gt gt gt gt AndroidRuntime START com android internal os RuntimeInit
  • C# 检查闰年

    我想将输入日期 1 年添加到名为完成日期的列中 如果输入日期是闰年 我需要添加 364 天 如果不是 365 天的话 有没有办法在 c 中检查这一点 使用当前日期时间年份并操作闰年 不操作 然后添加天数 Thanks 您可以使用日期时间 I
  • getUserMedia 在 chrome 版本 48.0.2560.0 中无法工作,而在 46.0 中工作

    我的困惑是 我在我的页面中使用了 gerUSerMedia 该页面无法在我们的服务器上工作 而在某些机器上 在那些 chrome 浏览器中具有版本为 48 0 2560 0 的 chrome 时 它 将给出以下警告 getUserMedia
  • 从脚本加载调用 Angular 控制器

    我试图在从 onload 回调加载脚本后更新控制器的状态 我加载 Google 客户端 API 然后在 OnLoadCallback 中 我尝试手动引导 AngularJS 并将设置状态设置到我的控制器上 function OnLoadCa
  • Cypress Vue 组件测试从已挂载发出的事件

    我有一个 vue2 组件 它在其安装的生命周期挂钩中发出一个事件 该事件被发出 并且可以由使用该组件的页面处理 但是 我还想测试该事件是否在我的组件测试中发出 该测试使用赛普拉斯组件测试运行程序 这是一个精简版本 组件 TheCompone