Add compilerOptions when processing the template, on v5.0.0-alpha.10

[kazvaggos]

Hello team. With my team we are migrating from Vue2 to Vue3. We are using Jest v26.6.3, and we upgraded to vue-jest v5.0.0-alpha.10, as you propose on the docs. However, we noticed that vue-jest in this version ignores the compilerOptions that we set through globals. We would like to add the option whitespace: 'preserve' because this is the way that we need to set the whitespace in our webpack config, and we would like the generated snapshots to match the compiled html. Is it possible in template processing to add a complierOptions override? Or is there another workaround? The suggested change is the following:

// process.js::function processTemplate(descriptor, filename, config)

  const result = compileTemplate({
    id: filename,
    source: template.content,
    filename,
    preprocessLang: template.lang,
    preprocessOptions: vueJestConfig[template.lang],
    compilerOptions: {
      bindingMetadata: bindings,
      mode: 'module'
    }
  })

  // change to ======>

  const result = compileTemplate({
    id: filename,
    source: template.content,
    filename,
    preprocessLang: template.lang,
    preprocessOptions: vueJestConfig[template.lang],
    compilerOptions: {
      bindingMetadata: bindings,
      mode: 'module',
      ...vueJestConfig.compilerOptions,
    }
  })

Thanks in advance.

[lmiller1990]

Hi, docs are dated - a PR would be great.

You probably want @vue/vue2-jest or @vue/vue3-jest. We now couple to the Jest version. You want the version to match your Jest version, see: https://github.com/vuejs/vue-jest#installation

Eg Vue 3 and Jest 29 => @vue/vue3-jest@29 etc.

[mikemklee]

@kazvaggos What did you end up doing for this? We are also in the process of migrating to Vue 3, and the whitespace issue in snapshot tests is a blocker for us too.

We tried to set the compilerOptions too, but that doesn't seem to do anything 🤔 Our jest config looks like this:

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest',
    '^.+\\.js?$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|webp|ttf|woff|woff2|md|svg)$': 'jest-transform-stub',
  },
  ...
  globals: {
    '@vue/vue3-jest': {
      compilerOptions: {
        whitespace: 'preserve',
      },
    },
  },
};

Using: "jest": "^27.0.0" "@vue/vue3-jest": "27", "@vue/test-utils": "^2.3.2",