Блог

Я пытался смоделировать функцию getter, но эта функция также вызывается другим вычисляемым свойством и возвращается как неопределенная функция.

Это элементарный компонент, который изменяется соответственно пути маршрутизации. Первый тест проходит нормально, потому что компонент не должен отображать. Но второй тест пытается получить пользовательские данные с помощью getter, используя его имя пользователя.

Я сомневаюсь в макете getter. Разве это не должно возвращать макет объекта, определенный в beforeEach?

Заранее спасибо!

Вот спецификация теста:

 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
    }
  }
  

Я подозреваю, что вам нужно это изменить:

 getUserByUsername: (path) => ({
  

Для:

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

Судя по сообщению об ошибке и коду компонента, может показаться, что реальная версия getUserByUsername возвращает функцию, поэтому макет версии должен делать то же самое. Взгляните на оригинал getUserByUsername для подтверждения.

Напомним, что внешняя функция для getter не является чем-то, что вы явно вызываете. Он используется за кулисами при доступе к свойству и передается state в качестве его первого аргумента.