在另一个计算属性上调用 getter 不是测试中的函数

Posted 2023-02-22

【中文标题】在另一个计算属性上调用 getter 不是测试中的函数

【英文标题】：Calling getter at another computed property is not a function on testing

【发布时间】：2020-12-11 19:00:01

【问题描述】：

我一直在尝试模拟一个 getter 函数，但这个函数也被另一个计算属性调用，它作为一个未定义的函数返回。

这是一个面包屑组件，它会根据路由路径进行相应更改。第一个测试正常通过，因为该组件不应该呈现。但第二个测试尝试通过使用用户名的 getter 获取用户数据。

我的疑问是关于模拟吸气剂。不应该返回定义在 beforeEach 的 mock 对象吗？

提前致谢！

这是测试规范：

import 
  shallowMount,
  createLocalVue
 from '@vue/test-utils'
import Breadcrumb from '@/components/Breadcrumb.vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use(VueRouter)
const router = new VueRouter()

describe('Breadcrumb.vue', () => 
  let store

  beforeEach(() => 
    store = new Vuex.Store(
      getters: 
        getUserByUsername: (path) => (
          name: 
            first: 'FirstName',
            last: 'LastName'
          
        )
      
    )
  )

  it('renders home page breadcrumb', () => 
    const wrapper = shallowMount(Breadcrumb,  store, router, localVue )
    const component = wrapper.find('.breadcrumb')
    expect(component.text()).toBe('')
  )
  it('renders users page breadcrumb', () => 
    router.push('/users')
    const wrapper = shallowMount(Breadcrumb,  store, router, localVue )
    const component = wrapper.find('.breadcrumb')
    expect(component.text()).toBe('')
  )
)

第一个测试通过但第二个返回：

TypeError: this.getUserByUsername is not a function

  41 |       crumbs.push(this.users)
  42 |       for (const path of paths) 
> 43 |         const user = this.getUserByUsername(path)
     | ^
  44 |         if (user) 
  45 |           crumbs.push(
  46 |             label: `$user.name.first $user.name.last`,

这是组件的计算函数：

  computed: 
    ...mapGetters(['getUserByUsername']),
    breadcrumbs () 
      const crumbs = []
      const routePath = this.$route.path
      if (routePath === '/' || routePath === '/404') return []
      const paths = routePath.split('/')
      delete paths[0]
      crumbs.push(this.home)
      crumbs.push(this.users)
      for (const path of paths) 
        const user = this.getUserByUsername(path)
        if (user) 
          crumbs.push(
            label: `$user.name.first $user.name.last`,
            path: `/$path`
          )
        
      

      return crumbs
    
  

【参考方案1】：

我怀疑你需要改变这个：

getUserByUsername: (path) => (

到：

getUserByUsername: () => (path) => (

从错误消息和组件代码来看，getUserByUsername 的真实版本似乎正在返回一个函数，因此模拟版本也需要这样做。看原文getUserByUsername确认。

回想一下，getter 的外部函数不是您显式调用的。它在您访问该属性时在幕后使用，并将 state 作为其第一个参数传递。