From af556eb853ab978ab231751c855b65bd1ddf573e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Exbrayat?=
 <cexbrayat@users.noreply.github.com>
Date: Mon, 29 Nov 2021 00:13:48 +0100
Subject: [PATCH] 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                                     | 28 +++++++++++++
 .../package.json                              | 42 +++++++++++++++++++
 .../components/PropsDestructureTransform.vue  |  7 ++++
 .../src/shims-vue.d.ts                        |  5 +++
 .../src/test.ts                               | 25 +++++++++++
 .../tsconfig.json                             | 24 +++++++++++
 packages/vue3-jest/lib/process.js             |  9 ++--
 7 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 e2e/3.x/typescript-with-compiler-options/package.json
 create mode 100644 e2e/3.x/typescript-with-compiler-options/src/components/PropsDestructureTransform.vue
 create mode 100644 e2e/3.x/typescript-with-compiler-options/src/shims-vue.d.ts
 create mode 100644 e2e/3.x/typescript-with-compiler-options/src/test.ts
 create mode 100644 e2e/3.x/typescript-with-compiler-options/tsconfig.json

diff --git a/README.md b/README.md
index a2cd571e..573c5bb9 100644
--- a/README.md
+++ b/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.
diff --git a/e2e/3.x/typescript-with-compiler-options/package.json b/e2e/3.x/typescript-with-compiler-options/package.json
new file mode 100644
index 00000000..6a0e840f
--- /dev/null
+++ b/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
+        }
+      }
+    }
+  }
+}
diff --git a/e2e/3.x/typescript-with-compiler-options/src/components/PropsDestructureTransform.vue b/e2e/3.x/typescript-with-compiler-options/src/components/PropsDestructureTransform.vue
new file mode 100644
index 00000000..304af9d4
--- /dev/null
+++ b/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>
diff --git a/e2e/3.x/typescript-with-compiler-options/src/shims-vue.d.ts b/e2e/3.x/typescript-with-compiler-options/src/shims-vue.d.ts
new file mode 100644
index 00000000..64c3fd9e
--- /dev/null
+++ b/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;
+}
diff --git a/e2e/3.x/typescript-with-compiler-options/src/test.ts b/e2e/3.x/typescript-with-compiler-options/src/test.ts
new file mode 100644
index 00000000..5dbd868f
--- /dev/null
+++ b/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')
+})
diff --git a/e2e/3.x/typescript-with-compiler-options/tsconfig.json b/e2e/3.x/typescript-with-compiler-options/tsconfig.json
new file mode 100644
index 00000000..2ae52c99
--- /dev/null
+++ b/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"]
+}
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
index 16908429..9442a441 100644
--- a/packages/vue3-jest/lib/process.js
+++ b/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
   }