Unit testing a component with QPageSticky



  • I’m trying to write a test using jest for a component that looks like this:

    <template>
      <q-page-sticky
        position="top"
        expand
        class="bg-secondary text-base"
      >
        <q-toolbar dense>
          <q-btn
            v-if="hasBackBtn"
            flat
            round
            dense
            icon="chevron_left"
          />
          ...
        </q-toolbar>
      </q-page-sticky>
    </template>
    

    Mounting this component in test logs out QPageSticky needs to be child of QLayout error in console.

    describe('Foo.vue', () => {
      const localVue = createLocalVue();
      localVue.use(Quasar, { components });
      // error in mount
      const wrapper = mount(Foo, {
        localVue,
        propsData: {
          hasBackBtn: false,
          title: 'Title',
        },
      });
      const { vm } = wrapper;
      ...
    

    Making a temporary component and passing it to parentComponent field in mount() still didn’t work.

    const parentQLayout = {
      name: 'parentQLayout',
      template: '<q-layout></q-layout>',
    };
    
    describe('Foo.vue', () => {
      const localVue = createLocalVue();
      localVue.use(Quasar, { components });
    
      const wrapper = mount(Foo, {
        localVue,
        parentComponent: parentQLayout,
        propsData: {
          hasBackBtn: false,
          title: 'Title',
        },
      });
      const { vm } = wrapper;
    

    This component is used inside parent component that has QLayout in actual source code btw. Is there any way to test a component with QPageSticky independently given its QLayout restriction?


Log in to reply