vue.js Test unit with test-utils not passing

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.

user762579 · Accepted Answer · 2018-09-19 10:26:14Z

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);
  });

answered Sep 19, 2018 at 10:26

user762579

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js Test unit with test-utils not passing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related