test: compilerOptions (#385)

test(compilerOptions): ensure compilerOptions is passed down

Co-authored-by: Sasan Farrokh <[email protected]>

e2e/3.x/basic/components/CompilerDirective.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1 class="header" v-test="'value'">Hello</h1>
+  </div>
+</template>

e2e/3.x/basic/jest.config.js

@@ -0,0 +1,26 @@
+const vTestDirective = require('./v-test-directive')
+
+module.exports = {
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': '@vue/vue3-jest'
+  },
+  moduleNameMapper: {
+    '^~?__styles/(.*)$': '<rootDir>/components/styles/$1'
+  },
+  globals: {
+    'vue-jest': {
+      pug: {
+        basedir: './'
+      },
+      compilerOptions: {
+        directiveTransforms: {
+          test: vTestDirective
+        }
+      }
+    }
+  }
+}

e2e/3.x/basic/package.json

@@ -25,29 +25,5 @@
     "vue-class-component": "^8.0.0-beta.4",
     "@vue/vue3-jest": "^27.0.0-alpha.1",
     "vue-property-decorator": "^10.0.0-rc.3"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue",
-      "ts"
-    ],
-    "transform": {
-      "^.+\\.ts$": "ts-jest",
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "@vue/vue3-jest"
-    },
-    "moduleNameMapper": {
-      "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
-    },
-    "globals": {
-      "vue-jest": {
-        "pug": {
-          "basedir": "./"
-        }
-      }
-    }
   }
 }

e2e/3.x/basic/test.js

@@ -22,6 +22,7 @@ import { randomExport } from './components/NamedExport.vue'
 import ScriptSetup from './components/ScriptSetup.vue'
 import ScriptSetupSugarRef from './components/ScriptSetupSugarRef.vue'
 import FunctionalRenderFn from './components/FunctionalRenderFn.vue'
+import CompilerDirective from './components/CompilerDirective.vue'
 
 // TODO: JSX for Vue 3? TSX?
 import Jsx from './components/Jsx.vue'
@@ -36,7 +37,9 @@ function mount(Component, props, slots) {
       return h(Component, props, slots)
     }
   }
-  createApp(Parent).mount(el)
+  const app = createApp(Parent)
+  app.directive('test', el => el.setAttribute('data-test', 'value'))
+  app.mount(el)
 }
 
 test('supports <script setup>', () => {
@@ -197,3 +200,10 @@ test('processes functional component exported as function', () => {
   expect(elem).toBeTruthy()
   expect(elem.innerHTML).toBe('Nyan')
 })
+
+test('ensure compilerOptions is passed down', () => {
+  mount(CompilerDirective)
+
+  const elm = document.querySelector('h1')
+  expect(elm.hasAttribute('data-test')).toBe(false)
+})

e2e/3.x/basic/v-test-directive.js

@@ -0,0 +1,3 @@
+module.exports = (dir, node, ...args) => {
+  return { needRuntime: false, props: [] }
+}