jeudi 3 octobre 2019

How to Unit Test with component in default.vue Jest

I'm trying to write tests for default.vue file which has the following code:

default.vue

<template>
 <div>
   <top-nav :class="isSticky ? 'fixed-top stickyAnimate' : ''" />
   <main>
     <nuxt />
   </main>
   <footer />
 </div>
</template>

<script>
import TopNav from '../components/TopNav.vue';
import Footer from '../components/Footer.vue';
import StickyNavMixin from '../mixins/stickyNavMixin';

export default {
  components: {
    TopNav,
    Footer,
  },
  mixins: [StickyNavMixin],
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    if (!window.location.hash) {
      this.loading = false;
    }
  },
};
</script>

then my test look like this default.spec.js

import { createLocalVue, shallowMount } from '@vue/test-utils';
import BootstrapVue from 'bootstrap-vue';
import StickyNavMixin from '../mixins/stickyNavMixin';
import Default from '../layouts/default.vue';
import TopNav from '../components/TopNav.vue';
import Footer from '../components/Footer.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);
localVue.mixin(StickyNavMixin);

describe('Default', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallowMount(Default, {
      localVue,
    });
  });

  test('is a Vue instance', () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });

  test('has navbar component', () => {
    expect(wrapper.find(TopNav).exists()).toBe(true);
  });
});

When I ran this test, I get error says: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in --->

Please guide me a right direction. Thank you in advance!

Aucun commentaire:

Enregistrer un commentaire