Question

我已经为此苦苦挣扎了一段时间，我正尝试测试单击按钮时是否调用了VueJS方法。由于某种原因，测试用例不断失败，并引发以下错误。

AssertionError: expected loadURL to have been called at least once, but it was never called

我尝试了各种不同的方法来设置此测试用例，但我终生无法弄清为什么它没有通过。

这是我的代码

VUEJS代码

<template>
  <v-app dark>
    <v-toolbar class="toolbar" app>
      <v-toolbar-title class="headline text-uppercase">
        <span>PARTY</span>
        <span class="font-weight-light">QUEUE</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-text-field
        placeholder="Enter a YouTube URL"
        v-model="youtubeURL"
        @keypress.native.enter="loadURL()"
      ></v-text-field>
      <v-btn class="add-to-queue" v-on:click="loadURL()" :loading="isLoading">Add To Queue</v-btn>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <Home class="home"></Home>
    </v-content>
  </v-app>
</template>

<script>
import Home from './components/Home'
export default {
  name: 'App',
  components: {
    Home
  },
  data () {
    return {
      youtubeURL: '',
      isLoading: false
    }
  },
  methods: {
    loadURL () {
      this.isLoading = true
      var youtubeEmbedTemplate = 'https://www.youtube.com/embed/'
      var youtubeVideoID = this.youtubeURL.substring(32,43)
      var autoplay = '?autoplay=1'
      var topOfQueue = youtubeEmbedTemplate.concat(youtubeVideoID.concat(autoplay))
      this.$store.commit('setTopOfQueue', {
        TopOfQueue: topOfQueue
      })
      this.isLoading = false
      this.youtubeURL = ''
    }
  }
}
</script>

测试案例

import { expect } from 'chai'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import App from '@/App.vue'
import sinon from 'sinon'

var chai = require("chai");
var sinonChai = require("sinon-chai");
const localVue = createLocalVue()

chai.use(sinonChai);
localVue.use(Vuex)

describe('App.vue', () => {
  let wrapper
  let store
  let subject

  beforeEach(() => {
    store = new Vuex.Store({
      state: {}
    })
    wrapper = shallowMount(App, { store, localVue })
    subject = wrapper.vm
  })

  describe('when the add to queue button is clicked', () => {
    it('calls the loadURL method', () => {
      sinon.spy(subject, 'loadURL')
      wrapper.find('.add-to-queue').trigger('click')
      expect(subject.loadURL).to.have.been.called
    })
  })
})

任何帮助将不胜感激！

Answer 1

找到了解决方案，我替换了

wrapper.find('.add-to-queue').trigger('click')

与

wrapper.find('.add-to-queue').vm.$emit('click')

Mocha Chai测试用例在按钮单击时未调用VueJS方法

1 个答案: