带Jest和Vue测试UTIT的单位测试VUE

Question

我正在与Vue一起进行单位测试。 我正在尝试单元测试导航VUE组件。我开始简单，我只是想测试一种仅制成布尔值false的方法（由单击触发）。我也在使用Vuetify。我在某种程度上设法模仿了一个按钮，然后我希望我通过的变量（Showlogindrawer）在我的单元测试中返回false。我的错误是typeError：_vm.is.is.s.不是一个与代码不同部分有关的函数，我认为我缺少一些东西，但我在网上找不到任何东西。

下面我包括了组件和测试文件。

//Nav.vue
<template>
  <v-btn
        :to="{ name: 'home' }"
        aria-label="Home button"
        @click="hideDiv()"
   >
   </v-btn>

      <div>
        <transition name="nav-fade">
          <component v-bind:is="drawerSection"></component>
        </transition>
      </div>

</template>
<script>
     data() {
      return {
        drawerSection: function () {
          if (this.is.has('learning')) {
            return 'nav-learning'
          } else {
            return 'nav-explore'
          }
        },
      }
    },
    methods: {
      hideDiv() {
        if (!this.appState.restrictedAccessAlert)
          this.appState.showLoginDrawer = false
      }
}
</script>
<style>//disregard</style>

//Nav.spec.js
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import { shallowMount, mount } from '@vue/test-utils'
import Nav from '@/components/Nav'


const localVue = createLocalVue()
localVue.use(Vuetify)
localVue.use(Vuex)

describe('Testing Nav component', () => {
    let vuetify
    beforeEach(() => {
      vuetify = new Vuetify()
    })
    test('Test Button click when logged out', () => {
    const wrapper = mount(Navigation, {
      data() {
        return {
          appState: {
            showLoginDrawer: true,
            lastCapabilityPath: '',
            restrictedAccessAlert: false,
          },
          is: 'learning',
          localVue,
          vuetify,
        }
      },
    })

    const event = jest.fn()
    const button = wrapper.findAll('.v-btn').at(0)
    expect(button.text()).toContain('My Profile')

    button.vm.$on('click', event)
    expect(event).toHaveBeenCalledTimes(0)
    expect(wrapper.vm.showLoginDrawer).toBeTruthy()
    button.trigger('click')
    expect(event).toHaveBeenCalledTimes(1)
    expect(wrapper.vm.showLoginDrawer).toBeFalsy()
  })
})

我收到错误：

typeError：_vm.is.is.has不是函数

感谢您的任何帮助！

Answer 1

哦，我的错误是 has() 是一个集合函数，因此它不适用于字符串，所以我必须使其等于集合。

更新的代码：

  test('Test Basic HTML rendering', () => {
    const is = new Set(['learning', 'b', 'c'])

    const wrapper = mount(Navigation, {
      data() {
        return {
          appState: {
            showLoginDrawer: true,
            lastCapabilityPath: '',
            restrictedAccessAlert: false,
          },
          is,
          localVue,
          vuetify,
        }
      },
    })
    wrapper.vm.$vuetify.breakpoint.smAndUp = true
    expect(wrapper.html()).toContain('Log-in')
    // check the name of the component
    expect(wrapper.vm.$options.name).toMatch('NavProfile')
  })

Answer 2

请尝试使用async & await，也许每个事件调用都是异步的

describe('Testing Nav component', () => {
    let vuetify
    beforeEach(() => {
        vuetify = new Vuetify()
    })

    test('Test Button click when logged out', async () => { // use async
        const wrapper = mount(Navigation, {
            data() {
                return {
                    appState: {
                        showLoginDrawer: true,
                        lastCapabilityPath: '',
                        restrictedAccessAlert: false,
                    },
                    is: 'learning',
                    localVue,
                    vuetify,
                }
            },
        })

        const event = jest.fn()
        const button = wrapper.findAll('.v-btn').at(0)
        expect(button.text()).toContain('My Profile')

        button.vm.$on('click', event)
        expect(event).toHaveBeenCalledTimes(0)
        expect(wrapper.vm.showLoginDrawer).toBeTruthy()

        // Try use await at every event
        await button.trigger('click')
        expect(event).toHaveBeenCalledTimes(1)
        expect(wrapper.vm.showLoginDrawer).toBeFalsy()
    })
})