feat: allow to pass compilerOptions via the Jest config for Vue 3 (#412)

* chore: update to vue v3.2.22

Note that this also removes the now unneeded `@vue/compiler-sfc` dependency.
Fixes #410

* feat: allow to pass compilerOptions via the Jest config for Vue 3

These options can be used to define Vue compiler options in `@vue/vue3-jest`.

For example, to enable the newly intrioduced `propsDestructureTransform` in Vue v3.2.20:

```js
globals: {
  'vue-jest': {
    compilerOptions: {
      propsDestructureTransform: true
    }
  }
}
```

or to disable `refTransform` (which is enabled by default):

```js
globals: {
  'vue-jest': {
    compilerOptions: {
      refTransform: false
    }
  }
}
```

README.md

@@ -68,6 +68,34 @@ vue-jest compiles `<script />`, `<template />`, and `<style />` blocks with supp
 
 You can change the behavior of `vue-jest` by using `jest.globals`.
 
+#### Compiler Options in Vue 3
+
+These options can be used to define Vue compiler options in `@vue/vue3-jest`.
+
+For example, to enable `propsDestructureTransform`:
+
+```js
+globals: {
+  'vue-jest': {
+    compilerOptions: {
+      propsDestructureTransform: true
+    }
+  }
+}
+```
+
+or disable `refTransform` (which is enabled by default):
+
+```js
+globals: {
+  'vue-jest': {
+    compilerOptions: {
+      refTransform: false
+    }
+  }
+}
+```
+
 #### Supporting custom blocks
 
 A great feature of the Vue SFC compiler is that it can support custom blocks. You might want to use those blocks in your tests. To render out custom blocks for testing purposes, you'll need to write a transformer. Once you have your transformer, you'll add an entry to vue-jest's transform map. This is how [vue-i18n's](https://github.com/kazupon/vue-i18n) `<i18n>` custom blocks are supported in unit tests.

e2e/3.x/typescript-with-compiler-options/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "vue3-typescript-with-compiler-options",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache ./src/test.ts"
+  },
+  "dependencies": {
+    "vue": "^3.2.22"
+  },
+  "devDependencies": {
+    "@types/jest": "16.0.10",
+    "jest": "^27.0.0",
+    "ts-jest": "^27.0.1",
+    "typescript": "^4.1.2",
+    "@vue/vue3-jest": "^27.0.0-alpha.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "moduleFileExtensions": [
+      "js",
+      "ts",
+      "json",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      "^.+\\.ts$": "ts-jest",
+      "^.+\\.vue$": "@vue/vue3-jest"
+    },
+    "globals": {
+      "vue-jest": {
+        "compilerOptions": {
+          "propsDestructureTransform": true
+        }
+      }
+    }
+  }
+}

e2e/3.x/typescript-with-compiler-options/src/components/PropsDestructureTransform.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1>{{ name }}</h1>
+</template>
+
+<script setup lang="ts">
+const { name = 'name' } = defineProps<{ name?: string }>()
+</script>

e2e/3.x/typescript-with-compiler-options/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

e2e/3.x/typescript-with-compiler-options/src/test.ts

@@ -0,0 +1,25 @@
+import { createApp, h } from 'vue'
+
+import PropsDestructureTransform from '@/components/PropsDestructureTransform.vue'
+
+function mount(Component: any) {
+  document.getElementsByTagName('html')[0].innerHTML = ''
+  const el = document.createElement('div')
+  el.id = 'app'
+  document.body.appendChild(el)
+  const Parent = {
+    render() {
+      return h(Component)
+    }
+  }
+  createApp(Parent).mount(el)
+}
+
+test('support additional compiler options like `propsDestructureTransform`', () => {
+  // `propsDestructureTransform` is a new compiler option in v3.2.20
+  // that allows to destructure props with default values and retain reactivity
+  // The option is passed to the compiler via `globals.vue-jest.compilerOptions` of the Jest config in the package.json
+  mount(PropsDestructureTransform)
+  // if the option is properly passed, then the default value of the props is used
+  expect(document.querySelector('h1')!.textContent).toBe('name')
+})

e2e/3.x/typescript-with-compiler-options/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["webpack-env", "jest"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules"]
+}

packages/vue3-jest/lib/process.js

@@ -51,13 +51,14 @@ function processScriptSetup(descriptor, filePath, config) {
   if (!descriptor.scriptSetup) {
     return null
   }
+  const vueJestConfig = getVueJestConfig(config)
   const content = compileScript(descriptor, {
     id: filePath,
-    refTransform: true
+    refTransform: true,
+    ...vueJestConfig.compilerOptions
   })
   const contentMap = mapLines(descriptor.scriptSetup.map, content.map)
 
-  const vueJestConfig = getVueJestConfig(config)
   const transformer = resolveTransformer(
     descriptor.scriptSetup.lang,
     vueJestConfig
@@ -77,7 +78,6 @@ function processTemplate(descriptor, filename, config) {
   }
 
   const vueJestConfig = getVueJestConfig(config)
-
   if (template.src) {
     template.content = loadSrc(template.src, filename)
   }
@@ -86,7 +86,8 @@ function processTemplate(descriptor, filename, config) {
   if (scriptSetup) {
     const scriptSetupResult = compileScript(descriptor, {
       id: filename,
-      refTransform: true
+      refTransform: true,
+      ...vueJestConfig.compilerOptions
     })
     bindings = scriptSetupResult.bindings
   }