vue.jsjestjsstubtestcasevue-test-utils

How to globally stub component in vue test utils jest?


I have registered a component globally and have used in multiple files. There are more than 100 test cases files having both mount and shallowMount used, so i cannot go to each testcase and change mount to shallowMount.

Is there any way to stub component globally instead of going to each testcase and manually stubbing it.


Solution

  • That's probably best done from a Jest setup file so that the stub is set for all tests:

    // jest.config.js
    module.exports = {
      setupFiles: ['<rootDir>/jest.setup.js'],
    }
    

    In the setup file, you can stub components globally with Vue Test Utils' config.global.stubs:

    // jest.setup.js
    import { config } from '@vue/test-utils'
    
    // @vue/test-utils@v1
    config.stubs['my-component'] = { template: '<div />' }
    
    // @vue/test-utils@v2
    config.global.stubs['my-component'] = { template: '<div />' }