`compilerOptions` in `jest.globals` not taking effect?

[mikemklee]

I am trying to set the compilerOptions.whitespace to preserve. Am I setting this in the wrong place? setting it under the globals does not seem to do anything.

// jest.config.js
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',
      },
    },
  },
  ...
}

I am using:

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

[mikemklee]

Potentially a duplicate of https://github.com/vuejs/vue-jest/issues/493

[rogatty]

@mikemklee try this:

	globals: {
		'vue-jest': {
			compilerOptions: {
				whitespace: 'preserve',
			},
		},
	},

Works for me 🙂

[mikemklee]

@rogatty I tried both:

globals: {
  '@vue/vue3-jest': ...

and

globals: {
  'vue-jest': ...

but neither seem to work for me sadly.

Do you mind sharing what versions you are using for jest, vue-jest, and @vue/test-utils?

[mikemklee]

Upon further debugging, I noticed that the @vue/vue3-jest/lib/process.js::processScriptSetup() is early exiting, causing the compilerOptions to not get respected.

function processScriptSetup(descriptor, filePath, config) {
  if (!descriptor.scriptSetup) { // <---  this will cause this method to early exit
    return null
  }
  const vueJestConfig = getVueJestConfig(config)

  const content = compileScript(descriptor, {
    id: filePath,
    refTransform: true,
    ...vueJestConfig.compilerOptions
  })
  const contentMap = mapLines(descriptor.scriptSetup.map, content.map)

  const transformer = resolveTransformer(
    descriptor.scriptSetup.lang,
    vueJestConfig
  )

  const result = transformer.process(content.content, filePath, config)
  result.map = mapLines(contentMap, result.map)

  return result
}

I think by descriptor.scriptSetup, it's trying to look for the <script setup></script>

which is a new addition in vue 3.

For vue 2 components, descriptor.scriptSetup will always be null.

[rogatty]

@mikemklee versions I'm using:

jest: 27.3.1
@vue/vue3-jest: 27.0.0
@vue/test-utils: 2.3.2

I don't use <script setup></script> yet, I'm in the middle of migration to Vue 3. I use @vue/compat in the app but not in the tests.

If you use .vue files with <template> then it should go through processTemplate, I think: https://github.com/vuejs/vue-jest/blob/89586a0d39b237ae06c5b60cd56ea41a2b6264a1/packages/vue3-jest/lib/process.js#L115

[mikemklee]

@rogatty interesting, could you elaborate on what you said about using @vue/compat in the app, but not in the tests?

is it possible to have the app running with the compat build, while also keeping the tests passing as-is?

context: me and my team are also in the middle of our migration to Vue 3, and our tests are mostly failing after we:

• installed the compat build
• bumped vue-test-utils to v2

and we would like to figure out the best path forward that would minimize the amount of friction/changes required

[rogatty]

@mikemklee there is https://www.npmjs.com/package/vue-test-utils-compat but it doesn't support the latest vue-test-utils. It uses monkey patching and is very brittle.

There were some other issues I don't remember, and we've decided it's better to just migrate most of the tests, skip a few of problematic ones for now, and upgrade the app logic where necessary.