vuetify test-utils & Jest ： 按钮点击未处理

Question

给定以下 AudioPlayer.vue 组件

<template>
<div style="display: inline-block;">
<v-btn id="playPauseBtn" class="inline teal--text" outline icon @click.native="playing ? pause() : play()">
<v-icon v-if="playing === true">pause</v-icon>
<v-icon v-else>play_arrow</v-icon>
</v-btn>
<v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()">
<v-icon>stop</v-icon>
</v-btn>
<v-btn id="muteBtn" outline icon class="inline teal--text" @click.native="toggleMute()">
<v-icon v-if="muted === false">volume_up</v-icon>
<v-icon v-else>volume_off</v-icon>
</v-btn>
<v-slider id="progress" class="inline slider" color="#464898" :value="trackProgress" @change="setPosition" @end="audioEnded"></v-slider>
<p class="inline" id="duration" style="color: #464898">{{ currentTimeFmt }} / {{ durationFmt }}</p>>
</div>
</template>
<script>
import VueHowler from "vue-howler";
const formatTime = second => {
let time = new Date(second * 1000).toISOString().substr(11, 8);
return time;
};
export default {
mixins: [VueHowler],
name: "audioPlayer",
data() {
return {
percentage: 0
};
},
computed: {
trackProgress() {
return this.progress * 100;
},
durationFmt() {
return formatTime(this.duration);
},
currentTimeFmt() {
return formatTime(this.duration * this.progress);
}
},
watch: {
playing() {
if (!this.playing && this.progress === 0 && this.seek === 0) {
this.$emit("playerStop");
}
}
},
methods: {
setPosition(sliderValue) {
this.percentage = sliderValue;
const currentDuration = parseInt((this.duration * this.percentage) / 100);
this.setSeek(currentDuration);
},
stop() {
console.log("STOP!");
this.$data._howl.stop();
this.$emit("playerStop");
},
audioEnded(sliderValue) {
this.percentage = sliderValue;
// console.log("audio ended");
this.stop();
}
}
};
</script>

我正在尝试测试触发 stop(( 方法的 STOP 按钮......

<template>
<div style="display: inline-block;">
<v-btn id="playPauseBtn" class="inline teal--text" outline icon @click.native="playing ? pause() : play()">
<v-icon v-if="playing === true">pause</v-icon>
<v-icon v-else>play_arrow</v-icon>
</v-btn>
<v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()">
<v-icon>stop</v-icon>
</v-btn>
<v-btn id="muteBtn" outline icon class="inline teal--text" @click.native="toggleMute()">
<v-icon v-if="muted === false">volume_up</v-icon>
<v-icon v-else>volume_off</v-icon>
</v-btn>
<v-slider id="progress" class="inline slider" color="#464898" :value="trackProgress" @change="setPosition" @end="audioEnded"></v-slider>
<p class="inline" id="duration" style="color: #464898">{{ currentTimeFmt }} / {{ durationFmt }}</p>>
</div>
</template>
<script>
import VueHowler from "vue-howler";
const formatTime = second => {
let time = new Date(second * 1000).toISOString().substr(11, 8);
return time;
};
export default {
mixins: [VueHowler],
name: "audioPlayer",
data() {
return {
percentage: 0
};
},
computed: {
trackProgress() {
return this.progress * 100;
},
durationFmt() {
return formatTime(this.duration);
},
currentTimeFmt() {
return formatTime(this.duration * this.progress);
}
},
watch: {
playing() {
if (!this.playing && this.progress === 0 && this.seek === 0) {
this.$emit("playerStop");
}
}
},
methods: {
setPosition(sliderValue) {
this.percentage = sliderValue;
const currentDuration = parseInt((this.duration * this.percentage) / 100);
this.setSeek(currentDuration);
},
stop() {
console.log("STOP!");
this.$data._howl.stop();
this.$emit("playerStop");
},
audioEnded(sliderValue) {
this.percentage = sliderValue;
// console.log("audio ended");
this.stop();
}
}
};
</script>

但是没有调用用于检查自定义事件"playerStop"的间谍函数。

$ yarn test:unit AudioPlayer.spec.js
yarn run v1.9.4
$ vue-cli-service test:unit AudioPlayer.spec.js
FAIL  tests/unit/AudioPlayer.spec.js
✕ should emit playerStop when STOP button is clicked (252ms)
AudioPlayer.vue
✓ should display Play/Pause, Stop, Mute buttons, a slider and a duration text (306ms)
● should emit playerStop when STOP button is clicked
expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.
60 |   // await wrapper.vm.$nextTick();
61 |   // then
> 62 |   expect(spy).toHaveBeenCalledTimes(1);
|               ^
63 | });

我错在哪里？它与Vuetify V-BTN定义有关吗？

感谢您的反馈

Answer 1

已解决...

我发现我不需要安装mixin来测试我的组件(我不是在测试mixin... 所以删除它后...(删除行：//从"vue-howler"导入VueHowler;和//mixins：[VueHowler]行(那么测试是可以的！