Instructions for setting up `vue-test` when migrating from Vue 2 to Vue 3?

[mikemklee]

Me and my team are in the process of migrating our codebase to Vue 3.

We installed the compat build, which allows us to not break most components that are still in Vue 2.

However, our tests started breaking since we installed @vue/vue3-jest because it seems to only assume that the components being tested are all in Vue 3.

For example, in @vue/vue3-jest/lib/process.js, the processScriptSetup and processTemplate doesn't compile the scripts if descriptor.scriptSetup can't be found, which would be the case for any Vue 2 components.

Is there a workaround for this? Which vue-jest version should we be using during the migration when we will have both Vue 2 and 3 components co-exist?

[estberg]

I see some time has passed since your question, but documenting this here in case it helps anyone.

Single file components seem to be transformed assuming Vue3 without vue/compat when just installing @vue/vue3-jest without no additional configuration.

However, it turns out that compilerOptions for 'vue-jest' can be configured, similar to what might be set up in the 'vue/compat' installation build step (see step 3).

For example, adding the following in jest.config.js seems to configure the compilation options for vue-jest to match the vue/compat MODE: 2 configuration:

  globals: {
    'vue-jest': {
      compilerOptions: {
        compatConfig: {
          MODE: 2
        },
      }
    }
  }

This can also nicely integrate with vue-test-utils-compat if you are working on migrating and focusing on jest tests.