다른 계산된 속성에서 getter를 호출하는 것은 테스트의 함수가 아닙니다.

다른 계산된 속성에서 getter를 호출하는 것은 테스트의 함수가 아닙니다.

getter 함수를 모킹하려고 했는데 이 함수도 다른 계산 속성에 의해 호출되어 정의되지 않은 함수로 반환되고 있습니다.

이것은 라우팅 경로에 따라 변경되는 브레드클럼 컴포넌트입니다.컴포넌트가 렌더링되지 않도록 되어 있기 때문에 첫 번째 테스트는 정상적으로 통과합니다.그러나 두 번째 테스트에서는 사용자 이름을 사용하여 getter를 사용하여 사용자 데이터를 가져오려고 합니다.

내가 의심하는 건 가짜 게터야각각 전에 정의한 모의 오브젝트를 반환해야 하는 거 아닌가요?

잘 부탁드립니다!

테스트 사양은 다음과 같습니다.

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그 첫 번째 논쟁으로

언급URL : https://stackoverflow.com/questions/63538979/calling-getter-at-another-computed-property-is-not-a-function-on-testing