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 组件测试从已挂载发出的事件 的相关文章

随机推荐

  • 在 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