Jest and vue/compat

[ckhatton-transreport]

Hi all

We have set up a alias resolve for Webpack in vue.config.js, which works fine for the build:

  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2,
            },
          },
        }
      })
  },

But when it comes to Jest testing, it ignores this config. I am trying to figure how to do similar for jest.config.js, so that we can load Bootstrap-Vue when the tests are run.

Any ideas?

[ckhatton-transreport]

I seem to have gotten Bootstrap-Vue working in the Jest tests, when using vue/compat with Vue 3.

In jest.config.js, I have applied the alias to moduleNameMapper:

  moduleNameMapper: {
    '^vue$': '@vue/compat',
  },

I could not fugure where to apply the compatConfig mode, so instead I added the configureCompat() function to a setup file via jest.config.js setupFiles:

  setupFiles: ['<rootDir>/setup'],

setup.js:

import { configureCompat } from 'vue'

configureCompat({
  .
  .
  .
})