vue-test-utils:如何测试 Mounted() 生命周期挂钩中的逻辑(使用 vuex)?

2024-05-20

我正在尝试为 Vue 中的逻辑编写一个单元测试mounted()生命周期钩子,但运气不太好。问题似乎是这样的mounted()使用 vue-test-utils 安装组件时永远不会被调用mount。这是我要测试的 Vue 组件:

<template>
  <div></div>
</template>

<script>   
export default {
  name: 'MyComponent',
  mounted () {
    this.$store.dispatch('logout')
  }
}
</script>

以及测试本身:

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MyComponent from '@/components/MyComponent'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let store
  let actions

  beforeEach(() => {
    actions = {
      logout: jest.fn().mockName('logout')
    }
    store = new Vuex.Store({
      state: {},
      actions
    })
  })

  it('calls store "logout" action', () => {
    mount(MyComponent, { localVue, store })
    expect(actions.logout).toHaveBeenCalled()
  })
})

但是,这会失败expect(logout).toHaveBeenCalled()断言为假。

如果我直接调用模拟商店操作actions.logout()测试通过了,我还有其他测试,这些测试也对按下按钮之类的事情调用存储操作,并且这些测试也通过了,所以问题肯定出在 Mounted() 生命周期挂钩上。

有什么想法吗?

(vue 2.5.4和 vue-test-utils1.0.0-beta-.15)


不确定它有什么不同,但我将商店模拟抽象到另一个文件,现在一切似乎都正常。

mocks.js

export const storeMock = Object.freeze({
  state: {},
  actions: {
    logout: jest.fn().mockName('logout')
  },
})

test.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import { storeMock } from './mocks.js' 
import MyComponent from '@/components/MyComponent'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let options

  beforeEach(() => {
    jest.clearAllMocks()
    const store = new Vuex.Store(storeMock)
    options = { store, localVue }
  })

  it('calls store "logout" action', () => {
    shallowMount(MyComponent, options)
    expect(storeMock.actions.logout).toHaveBeenCalled()
  })
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-test-utils:如何测试 Mounted() 生命周期挂钩中的逻辑(使用 vuex)? 的相关文章

随机推荐

  • Azure 事件中心 - 按顺序接收事件

    我使用下面的代码从 Azure Event Hub 接收事件 https learn microsoft com en us azure event hubs event hubs dotnet framework getstarted s
  • 将图像添加到自定义 AlertDialog

    我制作了一个 AlertDialog 让用户可以从我显示的 4 个选项中选择一个 前 3 个让他们在单击号码时直接拨打号码 第 4 个显示不同的视图 现在看起来是这样的 由于第四个选项的目的是不同的任务 我想让它看起来不同 因为用户可能会感
  • 如何在 Quartz 调度程序中每 25 秒运行一次?

    我正在使用 Java 的 Quartz Scheduling API 你能帮我使用 cron 表达式每 25 秒运行一次吗 这只是一个延迟 它不必总是从第 0 秒开始 例如 序列如下 0 00 0 25 0 50 1 15 1 40 2 0
  • SQL Server:如果存在会大大减慢查询速度

    正在使用SQL Server 2012 我找到了一些关于查询优化的主题 并将 EXISTS 与 COUNT 进行比较 但我找不到这个确切的问题 我有一个看起来像这样的查询 select from tblAccount as acc join
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 使用data.table进行聚合

    经过 SO 用户的多次建议后 我终于尝试将我的代码转换为使用data table library data table DT lt data table plate paste0 plate rep 1 2 each 5 id rep c
  • 选择获取与 MySQL Group 中 max 对应的整行

    当我使用Max使用后查找特定 MySQL 组中字段的最大值GROUP BY 是否可以获取包含最大值的整行 我在处理一些论坛代码时偶然发现了这个线程 我想获取每个线程的最新帖子并将其显示在特定板的线程列表中 Quassnoi上面的回答对我非常
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • JVM:是否可以操作帧堆栈?

    假设我需要执行N同一线程中的任务 这些任务有时可能需要来自外部存储的一些值 我事先不知道哪个任务可能需要这样的值以及何时 获取速度要快得多M价值观是一次性的而不是相同的M值在M查询外部存储 注意我不能指望任务本身进行合作 它们只不过是 ja
  • CONTAINS 不适用于 Oracle Text

    我在执行此查询时遇到问题 SELECT FROM gob attachment WHERE CONTAINS gob a document java gt 0 它给了我 ORA 29902 error in executing ODCIIn
  • 默认情况下,Keras 自定义层参数是不可训练的吗?

    我在 Keras 中构建了一个简单的自定义层 并惊讶地发现参数默认情况下未设置为可训练 我可以通过显式设置可训练属性来使其工作 我无法通过查看文档或代码来解释为什么会这样 这是应该的样子还是我做错了什么导致默认情况下参数不可训练 代码 im
  • 退出导航控制器

    我试图离开初始视图控制器 并进入空白视图控制器 这很好 但是这会使空白视图控制器也成为导航控制器的一部分 这不是我想要的 我想脱离视图控制器 在视图控制器中 我尝试退出 它会自行弹出 当我尝试视图中的方法时 将出现目标视图控制器 self
  • KnockoutJS 中的最大值和数值验证

    如何实现最大值验证并检查可观察值是否为数字 例如 self MyInteger ko observable extend numeric 2 extend maxValue params 255 message MyInteger cann
  • 基于xsd模式生成xml(使用.NET)

    我想根据我的 xsd 架构 cap xsd 生成 xml 文件 我找到了这篇文章并按照说明进行操作 使用 XSD 文件生成 XML 文件 https stackoverflow com questions 6530424 generatin
  • 无法将类型“System.IO.Stream”隐式转换为“Java.IO.InputStream”

    我提到了一些类似的问题 但没有一个涉及IO 当我使用时 我在java中使用了相同的代码Eclipse 那次就成功了 但现在我尝试在中使用这段代码Mono for Android C 它不起作用 我正在尝试运行此代码来创建一个InputStr
  • vim - 昏暗的非活动分割窗格

    如果您熟悉 iTerm2 应用程序 您就会知道您可以像 vim 一样分割视图 并且非活动视图会 变暗 我通常在 vim 中使用三个垂直分割视图 例如 通过将背景颜色设置为较暗的色调来调暗不活动的视图会很好 有没有办法做到这一点 我提出了以下
  • Amazon s3 – 403 禁止使用正确的存储桶策略

    我正在尝试使用以下存储桶策略 使存储在 s3 存储桶中的所有图像可供公开读取 Id Policy1380877762691 Statement Sid Stmt1380877761162 Action s3 GetObject Effect
  • 更改 Angular ui-bootstrap datepicker 日期顺序

    目前 ui bootstrap 日期选择器弹出窗口对一周中的周一至周日进行排序 客户要求我重新订购周日至周六 有趣的是 在 ui bootstrap 页面上 内联示例具有周日 周一顺序 但弹出窗口是周一 周日 有没有办法更改弹出窗口中的日期
  • vue-test-utils:如何测试 Mounted() 生命周期挂钩中的逻辑(使用 vuex)?

    我正在尝试为 Vue 中的逻辑编写一个单元测试mounted 生命周期钩子 但运气不太好 问题似乎是这样的mounted 使用 vue test utils 安装组件时永远不会被调用mount 这是我要测试的 Vue 组件