Merge branch 'master' of github.com:vuejs/vue-jest

Author: lmiller1990

README.md

@@ -1,34 +1,32 @@
 # vue-jest
 
-Jest transformer for Vue single file components
+Jest transformer for Vue Single File Components.
 
-> **NOTE:** This is documentation for `[email protected]`. [View the [email protected] documentation](https://github.com/vuejs/vue-jest/tree/v3)
+## Installation
 
-## Usage
+Since we need to support a variety of Vue and Jest versions, vue-jest doesn't follow semantic versioning.
 
-```bash
-npm install --save-dev vue-jest
-yarn add vue-jest --dev
-```
-
-### Usage with Babel 7
-
-If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) make sure to install babel-core@bridge
+| Vue version | Jest Version      | Package             |
+| ----------- | ----------------- | ------------------- |
+| Vue 2       | Jest 26 and below | `vue-jest@4`        |
+| Vue 3       | Jest 26 and below | `vue-jest@5`        |
+| Vue 2       | Jest 27           | `@vue/vue2-jest@27` |
+| Vue 3       | Jest 27           | `@vue/vue3-jest@27` |
 
 ```bash
-npm install --save-dev babel-core@bridge
-yarn add babel-core@bridge --dev
+npm install --save-dev @vue/vue2-jest@27 # (use the appropriate version)
+yarn add @vue/vue2-jest@27 --dev
 ```
 
 ## Setup
 
-To use `vue-jest` as a transformer for your `.vue` files, map them to the `vue-jest` module:
+To use `vue-jest` as a transformer for your `.vue` files, map them to the appropriate `vue-jest` module:
 
 ```json
 {
   "jest": {
     "transform": {
-      "^.+\\.vue$": "vue-jest"
+      "^.+\\.vue$": "@vue/vue2-jest" // Update to match your installed version
     }
   }
 }
@@ -42,19 +40,22 @@ A full config will look like this.
     "moduleFileExtensions": ["js", "json", "vue"],
     "transform": {
       "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "vue-jest"
+      "^.+\\.vue$": "@vue/vue2-jest"
     }
   }
 }
 ```
 
-## Examples
+### Usage with Babel 7
 
-Example repositories testing Vue components with jest and vue-jest:
+If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) make sure to install babel-core@bridge
 
-- [Vue Test Utils with Jest](https://github.com/eddyerburgh/vue-test-utils-jest-example)
+```bash
+npm install --save-dev babel-core@bridge
+yarn add babel-core@bridge --dev
+```
 
-## Supported langs
+## Supported languages for SFC sections
 
 vue-jest compiles `<script />`, `<template />`, and `<style />` blocks with supported `lang` attributes into JavaScript that Jest can run.
 
@@ -79,10 +80,10 @@ A `package.json` Example
     "moduleFileExtensions": ["js", "json", "vue"],
     "transform": {
       "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "vue-jest"
+      "^.+\\.vue$": "@vue/vue2-jest"
     },
     "globals": {
-      "vue-jest": {
+      "@vue/vue2-jest": {
         "transform": {
           "your-custom-block": "./custom-block-processor.js"
         }
@@ -99,7 +100,7 @@ A `jest.config.js` Example - If you're using a dedicated configuration file like
 ```js
 module.exports = {
   globals: {
-    'vue-jest': {
+    '@vue/vue2-jest': {
       transform: {
         'your-custom-block': require('./custom-block-processor')
       }
@@ -134,7 +135,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp
 {
   "jest": {
     "globals": {
-      "vue-jest": {
+      "@vue/vue2-jest": {
         "templateCompiler": {
           "transpileOptions": {
             "transforms": {
@@ -159,7 +160,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp
   {
     "jest": {
       "globals": {
-        "vue-jest": {
+        "@vue/vue2-jest": {
           "pug": {
             "basedir": "mybasedir"
           }
@@ -231,3 +232,24 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp
   }
 }
 ```
+
+## Style options
+
+Possbility to change style loader options (sass, scss, less etc).
+
+`styleOptions`: `Object` Default `{}`.
+
+```json
+{
+  "jest": {
+    "globals": {
+      "vue-jest": {
+        "styleOptions": {
+          "quietDeps" // e.q. sass options https://sass-lang.com/documentation/js-api#quietdeps
+          // unfortunately rest options like `data`, `file` doesnt work because @vue/compiler-component-utils internally overwrite options with their values
+        },
+      }
+    }
+  }
+}
+```

e2e/2.x/babel-in-package/components/Tsx.vue

@@ -0,0 +1,14 @@
+<script lang="tsx">
+import Vue from 'vue'
+
+export default Vue.extend({
+  computed: {
+    exclamationMarks(): string {
+      return 'tsx components'
+    }
+  },
+  render(): VNode {
+    return <div>{this.exclamationMarks}</div>
+  }
+})
+</script>

e2e/2.x/babel-in-package/package.json

@@ -14,12 +14,13 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
+    "@vue/babel-preset-jsx": "^1.2.4",
     "@vue/test-utils": "^1.1.0",
+    "@vue/vue2-jest": "~27.0.0-alpha.1",
     "coffeescript": "^2.3.2",
     "jest": "27.x",
     "ts-jest": "^27.0.4",
-    "typescript": "^3.2.2",
-    "@vue/vue2-jest": "~27.0.0-alpha.1"
+    "typescript": "^3.2.2"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -35,7 +36,8 @@
   },
   "babel": {
     "presets": [
-      "@babel/env"
+      "@babel/env",
+      "@vue/babel-preset-jsx"
     ]
   }
 }

e2e/2.x/babel-in-package/test.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import TypeScript from './components/TypeScript.vue'
 import Basic from './components/Basic.vue'
 import Coffee from './components/Coffee.vue'
+import Tsx from './components/Tsx.vue'
 
 test('processes .vue files', () => {
   const wrapper = mount(Basic)
@@ -13,7 +14,12 @@ test('processes .vue file with lang set to coffee', () => {
   expect(wrapper.vm).toBeTruthy()
 })
 
-test('processes .vue files with lang set to typescript', () => {
+test('processes .vue files with lang set to ts(typescript)', () => {
   const wrapper = mount(TypeScript)
   expect(wrapper.vm).toBeTruthy()
 })
+
+test('processes .vue files with lang set to tsx(typescript)', () => {
+  const wrapper = mount(Tsx)
+  expect(wrapper.text()).toContain('tsx components')
+})

e2e/2.x/babel-in-package/tsconfig.json

@@ -14,6 +14,7 @@
     "emitDecoratorMetadata": true,
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "esModuleInterop": true
   }
 }

e2e/2.x/basic/test.js

@@ -19,7 +19,13 @@ import Pug from './components/Pug.vue'
 import PugRelative from './components/PugRelativeExtends.vue'
 import Jsx from './components/Jsx.vue'
 import Constructor from './components/Constructor.vue'
+import { compileStyle } from '@vue/component-compiler-utils'
+jest.mock('@vue/component-compiler-utils', () => ({
+  ...jest.requireActual('@vue/component-compiler-utils'),
+  compileStyle: jest.fn(() => ({ errors: [], code: '' }))
+}))
 
+beforeEach(() => jest.clearAllMocks())
 test('processes .vue files', () => {
   const wrapper = mount(Basic)
   expect(wrapper.vm.msg).toEqual('Welcome to Your Vue.js App')
@@ -149,3 +155,29 @@ test('processes SFC with no template', () => {
   const wrapper = mount(RenderFunction)
   expect(wrapper.element.tagName).toBe('SECTION')
 })
+
+test('should pass properly "styleOptions" into "preprocessOptions"', () => {
+  const filePath = resolve(__dirname, './components/Basic.vue')
+  const fileString = readFileSync(filePath, { encoding: 'utf8' })
+  const config = {
+    moduleFileExtensions: ['js', 'vue'],
+    globals: {
+      'vue-jest': {
+        styleOptions: {
+          quietDeps: true
+        }
+      }
+    }
+  }
+
+  jestVue.process(fileString, filePath, {
+    config
+  })
+
+  expect(compileStyle.mock.calls[0][0].preprocessOptions).toStrictEqual({
+    quietDeps: true
+  })
+  expect(compileStyle.mock.calls[1][0].preprocessOptions).toStrictEqual({
+    quietDeps: true
+  })
+})

e2e/3.x/babel-in-package/package.json

@@ -7,12 +7,12 @@
     "test": "jest --no-cache test.js"
   },
   "dependencies": {
-    "vue": "^3.2.6"
+    "vue": "^3.2.19"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@vue/compiler-sfc": "^3.2.6",
+    "@vue/compiler-sfc": "^3.2.19",
     "coffeescript": "^2.3.2",
     "jest": "^27.0.0",
     "ts-jest": "^27.0.1",

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

@@ -7,12 +7,12 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "^3.2.6"
+    "vue": "^3.2.19"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@vue/compiler-sfc": "^3.2.6",
+    "@vue/compiler-sfc": "^3.2.19",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
@@ -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: [] }
+}

e2e/3.x/custom-transformers/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.2.6",
-    "vue": "^3.2.6"
+    "@vue/compiler-sfc": "^3.2.19",
+    "vue": "^3.2.19"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",