vue.js Test unit with test-utils not passing - unit-testing

Question

I am trying to test the following part of my Heading.vue component
<v-layout column align-center justify-center>
<img src="#/assets/images/logo.png" alt="Logo-Choro-des-Charentes" height="200">
<h1 class="mb-2 display-1 text-xs-center">{{ $t('lang.views.home.heading.header1') }}</h1>
<h2 class="mb-2 display-1 text-xs-center"> {{ $t('lang.views.home.heading.header2') }}</h2>
<div class="subheading mb-3 text-xs-center">{{ $t('lang.views.home.heading.subheading') }}</div>
<v-btn v-if="!listening" id="playBtn" round #click="listening = true" class="primary" large href="#">{{ $t("lang.views.home.heading.btn__listen") }}
<v-icon right>play_arrow</v-icon>
</v-btn>
<v-btn v-else round large href="#">
<audioplayer id="audioplayer" :autoplay="true" :loop="false" :sources="audioSources" #playerStop="{{ listening = false; }}"></audioplayer>
</v-btn>
</v-layout>
using the follwoing spec file
import Vue from "vue";
import { shallowMount } from "#vue/test-utils";
import router from "#/router";
import Vuetify from "vuetify";
import i18n from "#/locales";
import Heading from "#/components/Home/Heading.vue";
describe("Heading.vue", () => {
let wrapper;
beforeEach(() => {
Vue.use(router);
Vue.use(Vuetify);
Vue.filter("translate", function(value) {
if (!value) return "";
value = "lang.views.global." + value.toString();
return i18n.t(value);
});
const el = document.createElement("div");
el.setAttribute("data-app", true);
document.body.appendChild(el);
});
it("should display AUDIOPLAYER on event LISTEN link click", (done) => {
wrapper = shallowMount(Heading, { router, i18n });
wrapper.find("#playBtn").trigger("click");
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.listening).toBe(true);
done();
});
});
});
But I get a Timeout error .... so test is failing
RUNS tests/unit/Heading.spec.js
Test Suites: 1 passed, 1 of 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 9s, estimated 10s
console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Error in nextTick: "Error: expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false"
found in
---> <Heading>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.js:1739
{ Error: expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
at VueComponent.toBe (/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/tests/unit/Heading.spec.js:37:36)
at Array.<anonymous> (/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue/dist/vue.runtime.common.js:1835:12)
at flushCallbacks (/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue/dist/vue.runtime.common.js:1756:14)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
FAIL tests/unit/Heading.spec.js (9.708s)
Heading.vue
✕ should display AUDIOPLAYER on event LISTEN link click (5191ms)
● Heading.vue › should display AUDIOPLAYER on event LISTEN link click
Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.
31 | });
32 | */
> 33 | it("should display AUDIOPLAYER on event LISTEN link click", (done) => {
| ^
34 | wrapper = shallowMount(Heading, { router, i18n });
35 | wrapper.find("#playBtn").trigger("click");
36 | wrapper.vm.$nextTick(() => {
at Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:85:20)
at Suite.it (tests/unit/Heading.spec.js:33:3)
at Object.describe (tests/unit/Heading.spec.js:8:1)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 2 passed, 3 total
Snapshots: 0 total
Time: 14.43s
Ran all test suites matching /Heading.spec.js/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

It's fine when I use #click.native event
<v-btn v-if="!listening" id="playBtn" round #click.native="listening = true" class="primary" large href="#">{{ $t("lang.views.home.heading.btn__listen") }}
<v-icon right>play_arrow</v-icon>
</v-btn>
it("should display AUDIOPLAYER on event LISTEN link click", () => {
// given
wrapper = shallowMount(Heading, { router, i18n });
// when
wrapper.find('#playBtn').trigger('click');
// then
expect(wrapper.vm.listening).toEqual(true);
});