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 ``, ``, and `` 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) `` 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": {
+ "^@/(.*)$": "/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 @@
+
+ {{ name }}
+
+
+
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
}