【问题标题】:Vue-test-utils wrapper undefinedVue-test-utils 包装器未定义
【发布时间】:2019-03-07 00:31:15
【问题描述】:

我在 Jest 中有以下针对组件的测试套件。我已经成功地为其他几个遵循类似结构的组件编写了单元测试:

import { createLocalVue, mount } from '@vue/test-utils'
import Vuex from 'vuex'
import storeMock from '@mocks/store'
import RequestProposalsContainer from '@/components/RequestProposals/RequestProposalsContainer'

describe('ProviderComparison component', () => {
  let localVue, store, wrapper, storeSetup

  beforeEach(() => {
     localVue = createLocalVue()
     localVue.use(Vuex)

     storeSetup = storeMock()
     store = new Vuex.Store(storeSetup)
     /* wrapper is undefined and I'm not sure why */
     wrapper = mount(RequestProposalsContainer, {
       localVue,
       store
     })
  })

  it('renders correct structure', () => {
     /* undefined */
     console.log('wrapper: ', wrapper)
  })
})

通过检查,被挂载的组件、store 和 localVue 实例是明确定义的。

【问题讨论】:

  • 控制台有什么线索吗?您是否有指向 GitHub 存储库的链接来演示该问题?
  • 我查看了更多控制台错误,结果发现我需要在模拟存储中添加必要的字段,以及为路由器添加一个存根。问题已解决。
  • @AdamFreyymiller 您能在此处发布您的解决方案并接受吗?
  • @AdamFreyymiller 请分享解决方案

标签: javascript vue.js unit-testing vuejs2 vue-test-utils


【解决方案1】:

我遇到过类似的情况,wrapper 会返回 undefined。

在测试时,您必须为组件提供渲染所需的一切。

这是(正如@Adam Freymiller 已经提到的那样)所有必需的值(道具、存储值等)都没有在测试中设置,所以组件会出错,就像它在真实中一样生活场景。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-05-26
    • 2022-10-16
    • 2020-05-16
    • 2018-09-15
    • 2020-08-08
    • 2020-01-24
    • 2021-07-08
    • 2019-07-19
    相关资源
    最近更新 更多