Vue3 with Jest stub functionality does not stub

Question

Component:

<template>
  <div id="fileviewer" class="min-h-full">
    <section class="gap-4 mt-4">
      <div class="bg-medium-50 w-1/3 p-4">
        <FileUpload ></FileUpload>
      </div>
      <div class="bg-medium-50 w-2/3 p-4">
        <FileViewer></FileViewer>
      </div>
    </section>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
import FileViewer from "@/components/FileViewer";

export default {
  name: "FileManager",
  components: { FileUpload, FileViewer },
};
</script>

Test:

import { mount } from "@vue/test-utils";
import FileManager from '@/views/FileManager';

describe('FileManager.vue', () =>{

  it('should mount', () => {
    const wrapper = mount(FileManager, {
      global: {
        stubs: {
          FileUpload: true,
          FileViewer: true
        }
      }
    })

    expect(wrapper).toBeDefined()
  })

})

Does not work for me as per the docs. No special installations. Instead, The framework wants to do the 'import' statements for the child components and then fails because I do not want to mock out 'fetch' for this one component. Any Ideas?

"vue-jest": "^5.0.0-alpha.9"
"@vue/test-utils": "^2.0.0-rc.6"
"vue": "^3.0.0",

Thanks for help.

Eduardo · Accepted Answer · 2021-05-31 06:27:29Z

2

I. If you want to stub all child components automatically you just can use shallowMount instead of mount.

II. If you want so use mount anyway try to fix your stubs like that:

global: {
  stubs: {
    FileUpload: {
      template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
    },
    FileViewer: {
      template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
    }
  }
}

Or you can define your stubs before tests as I always do. For example:

const FileUploadStub = {
  template: '<div class="file-upload-or-any-class-you-want">You can put there anything you want</div>'
}

const FileViewerStub: {
  template: '<div class="file-viewer-or-any-class-you-want">You can put there anything you want</div>'
}

And then use stubs in mount or shallowMount:

global: {
  stubs: {
    FileUpload: FileUploadStub,
    FileViewer: FileViewerStub
  }
}

answered May 31, 2021 at 6:27

Eduardo

1,3311 gold badge8 silver badges22 bronze badges

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

1 Comment

thomi Over a year ago

Thanks. The problem for me was that although I used shallowMount, the Framework would still mount the imports in the child components (e. g. the test would fail because it tried to import firebase although I used shallowMount.

Collectives™ on Stack Overflow

Vue3 with Jest stub functionality does not stub

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related