Merge branch 'master' into patch-1

Author: lmiller1990

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:8.10
+      - image: circleci/node:10.16.3
 
     working_directory: ~/repo
 
@@ -12,16 +12,16 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - node-8-dependencies-{{ checksum "package.json" }}
+          - node-10-dependencies-{{ checksum "package.json" }}
           # fallback to using the latest cache if no exact match is found
-          - node-8-dependencies-
+          - node-10-dependencies-
 
       - run: yarn install
 
       - save_cache:
           paths:
             - node_modules
-          key: node-8-dependencies-{{ checksum "package.json" }}
+          key: node-10-dependencies-{{ checksum "package.json" }}
 
       # run tests!
       - run: npm run test

README.md

@@ -1,13 +1,14 @@
 # vue-jest
 
-Jest Vue transformer with source map support
+Jest transformer for Vue single file components
 
-> **NOTE:** This is documentation for `vue-jest@3.x`. [View the vue-jest@2.x documentation](https://github.com/vuejs/vue-jest/tree/e694fc7ce11ae1ac1c778ed7c4402515c5f0d5aa)
+> **NOTE:** This is documentation for `vue-jest@4.x`. [View the vue-jest@3.x documentation](https://github.com/vuejs/vue-jest/tree/v3)
 
 ## Usage
 
 ```bash
 npm install --save-dev vue-jest
+yarn add vue-jest --dev
 ```
 
 ### Usage with Babel 7
@@ -16,18 +17,20 @@ If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](ht
 
 ```bash
 npm install --save-dev babel-core@bridge
+yarn add babel-core@bridge --dev
 ```
 
 ## Setup
 
-To define `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 `vue-jest` module:
 
 ```json
 {
   "jest": {
     "transform": {
       "^.+\\.vue$": "vue-jest"
     }
+  }
 }
 ```
 
@@ -45,18 +48,15 @@ A full config will look like this.
 }
 ```
 
-If you're on a version of Jest older than 22.4.0, you need to set `mapCoverage` to `true` in order to use source maps.
-
-## Example Projects
+## Examples
 
 Example repositories testing Vue components with jest and vue-jest:
 
-- [Avoriaz with Jest](https://github.com/eddyerburgh/avoriaz-jest-example)
 - [Vue Test Utils with Jest](https://github.com/eddyerburgh/vue-test-utils-jest-example)
 
 ## Supported langs
 
-vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. **Currently, SCSS, SASS and Stylus are the only style languages that are compiled**.
+vue-jest compiles `<script />`, `<template />`, and `<style />` blocks with supported `lang` attributes into JavaScript that Jest can run.
 
 ### Supported script languages
 
@@ -67,8 +67,65 @@ vue-jest compiles the script and template of SFCs into a JavaScript file that Je
 
 You can change the behavior of `vue-jest` by using `jest.globals`.
 
+#### 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.
+
+A `package.json` Example
+
+```json
+{
+  "jest": {
+    "moduleFileExtensions": ["js", "json", "vue"],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue-jest"
+    },
+    "globals": {
+      "vue-jest": {
+        "transform": {
+          "your-custom-block": "./custom-block-processor.js"
+        }
+      }
+    }
+  }
+}
+```
+
 > _Tip:_ Need programmatic configuration? Use the [--config](https://jestjs.io/docs/en/cli.html#config-path) option in Jest CLI, and export a `.js` file
 
+A `jest.config.js` Example - If you're using a dedicated configuration file like you can reference and require your processor in the config file instead of using a file reference.
+
+```js
+module.exports = {
+  globals: {
+    'vue-jest': {
+      transform: {
+        'your-custom-block': require('./custom-block-processor')
+      }
+    }
+  }
+}
+```
+
+#### Writing a processor
+
+Processors must return an object with a "process" method, like so...
+
+```js
+module.exports = {
+  /**
+   * Process the content inside of a custom block and prepare it for execution in a testing environment
+   * @param {SFCCustomBlock[]} blocks All of the blocks matching your type, returned from `@vue/component-compiler-utils`
+   * @param {string} vueOptionsNamespace The internal namespace for a component's Vue Options in vue-jest
+   * @param {string} filename The SFC file being processed
+   * @param {Object} config The full Jest config
+   * @returns {string} The code to be output after processing all of the blocks matched by this type
+   */
+  process(blocks, vueOptionsNamepsace, filename, config) {}
+}
+```
+
 #### babelConfig
 
 Provide `babelConfig` in one of the following formats:

e2e/__projects__/basic/components/FunctionalSFCRender.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+  name: 'FunctionalSFCRender',
+  functional: true,
+  render(createElement, { $style }) {
+    return createElement('div', {
+      class: [$style.ModuleClass]
+    })
+  }
+}
+</script>
+
+<style lang="scss" module>
+.ModuleClass {
+  width: auto;
+}
+</style>

e2e/__projects__/basic/test.js

@@ -6,6 +6,7 @@ import jestVue from 'vue-jest'
 import RenderFunction from './components/RenderFunction.vue'
 import Jade from './components/Jade.vue'
 import FunctionalSFC from './components/FunctionalSFC.vue'
+import FunctionalSFCRender from './components/FunctionalSFCRender.vue'
 import Basic from './components/Basic.vue'
 import BasicSrc from './components/BasicSrc.vue'
 import { randomExport } from './components/NamedExport.vue'
@@ -92,6 +93,12 @@ test('processes functional components', () => {
   expect(clickSpy).toHaveBeenCalledWith(1)
 })
 
+test('processes functional components using render function', () => {
+  const wrapper = mount(FunctionalSFCRender)
+  const CSS_CLASSES = ['ModuleClass']
+  expect(wrapper.classes().toString()).toBe(CSS_CLASSES.toString())
+})
+
 test('processes SFC with functional template from parent', () => {
   const wrapper = mount(FunctionalSFCParent)
   expect(wrapper.text().trim()).toBe('foo')

e2e/__projects__/custom-transformers/package.json

@@ -16,9 +16,9 @@
     "@babel/preset-env": "^7.2.3",
     "@vue/test-utils": "^1.0.0-beta.28",
     "jest": "^24.0.0",
-    "node-sass": "^4.11.0",
     "postcss": "^7.0.13",
     "postcss-color-function": "^4.0.1",
+    "sass": "^1.23.7",
     "vue-jest": "file:../../../"
   },
   "jest": {

e2e/__projects__/style/package.json

@@ -16,8 +16,8 @@
     "@babel/preset-env": "^7.2.3",
     "@vue/test-utils": "^1.0.0-beta.28",
     "jest": "^24.0.0",
-    "node-sass": "^4.11.0",
     "postcss": "^7.0.13",
+    "sass": "^1.23.7",
     "vue-jest": "file:../../../"
   },
   "jest": {

lib/constants.js

@@ -0,0 +1,6 @@
+module.exports = {
+  vueOptionsNamespace: '__options__',
+  defaultVueJestConfig: {
+    transform: {}
+  }
+}

lib/generate-code.js

@@ -1,9 +1,12 @@
+const namespace = require('./constants').vueOptionsNamespace
+
 const splitRE = /\r?\n/g
 
 module.exports = function generateCode(
   scriptResult,
   templateResult,
   stylesResult,
+  customBlocksResult,
   isFunctional
 ) {
   let output = ''
@@ -21,7 +24,7 @@ module.exports = function generateCode(
   }
 
   output +=
-    `var __options__ = typeof exports.default === 'function' ` +
+    `var ${namespace} = typeof exports.default === 'function' ` +
     `? exports.default.options ` +
     `: exports.default\n`
 
@@ -37,11 +40,11 @@ module.exports = function generateCode(
 
     output +=
       `__options__.render = render\n` +
-      `__options__.staticRenderFns = staticRenderFns\n`
+      `${namespace}.staticRenderFns = staticRenderFns\n`
 
     if (isFunctional) {
-      output += '__options__.functional = true\n'
-      output += '__options__._compiled = true\n'
+      output += `${namespace}.functional = true\n`
+      output += `${namespace}._compiled = true\n`
     }
   }
 
@@ -59,22 +62,26 @@ module.exports = function generateCode(
     if (isFunctional) {
       output +=
         `;(function() {\n` +
-        `  var originalRender = __options__.render\n` +
+        `  var originalRender = ${namespace}.render\n` +
         `  var styleFn = function () { ${styleStr} }\n` +
-        `  __options__.render = function renderWithStyleInjection (h, context) {\n` +
+        `  ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
         `    styleFn.call(context)\n` +
         `    return originalRender(h, context)\n` +
         `  }\n` +
         `})()\n`
     } else {
       output +=
         `;(function() {\n` +
-        `  var beforeCreate = __options__.beforeCreate\n` +
+        `  var beforeCreate = ${namespace}.beforeCreate\n` +
         `  var styleFn = function () { ${styleStr} }\n` +
-        `  __options__.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
+        `  ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
         `})()\n`
     }
   }
+
+  if (customBlocksResult) {
+    output += `;\n ${customBlocksResult}`
+  }
   return {
     code: output,
     renderFnStartLine,

lib/process-custom-blocks.js

@@ -0,0 +1,41 @@
+const { getVueJestConfig, getCustomTransformer } = require('./utils')
+const vueOptionsNamespace = require('./constants').vueOptionsNamespace
+
+function applyTransformer(
+  transformer,
+  blocks,
+  vueOptionsNamespace,
+  filename,
+  config
+) {
+  return transformer.process({ blocks, vueOptionsNamespace, filename, config })
+}
+
+function groupByType(acc, block) {
+  acc[block.type] = acc[block.type] || []
+  acc[block.type].push(block)
+  return acc
+}
+
+module.exports = function(allBlocks, filename, config) {
+  const blocksByType = allBlocks.reduce(groupByType, {})
+  const code = []
+  for (const [type, blocks] of Object.entries(blocksByType)) {
+    const transformer = getCustomTransformer(
+      getVueJestConfig(config).transform,
+      type
+    )
+    if (transformer) {
+      const codeStr = applyTransformer(
+        transformer,
+        blocks,
+        vueOptionsNamespace,
+        filename,
+        config
+      )
+      code.push(codeStr)
+    }
+  }
+
+  return code.length ? code.join('\n') : ''
+}

lib/process.js

@@ -2,9 +2,10 @@ const splitRE = /\r?\n/g
 
 const VueTemplateCompiler = require('vue-template-compiler')
 const generateSourceMap = require('./generate-source-map')
-const typescriptTransformer = require('./typescript-transformer')
-const coffeescriptTransformer = require('./coffee-transformer')
+const typescriptTransformer = require('./transformers/typescript')
+const coffeescriptTransformer = require('./transformers/coffee')
 const _processStyle = require('./process-style')
+const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
@@ -99,11 +100,19 @@ module.exports = function(src, filename, config) {
   const templateResult = processTemplate(descriptor.template, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
+  const customBlocksResult = processCustomBlocks(
+    descriptor.customBlocks,
+    filename,
+    config
+  )
 
   const isFunctional =
-    descriptor.template &&
-    descriptor.template.attrs &&
-    descriptor.template.attrs.functional
+    (descriptor.template &&
+      descriptor.template.attrs &&
+      descriptor.template.attrs.functional) ||
+    (descriptor.script &&
+      descriptor.script.content &&
+      /functional:\s*true/.test(descriptor.script.content))
 
   const templateStart = descriptor.template && descriptor.template.start
   const templateLine = src.slice(0, templateStart).split(splitRE).length
@@ -112,6 +121,7 @@ module.exports = function(src, filename, config) {
     scriptResult,
     templateResult,
     stylesResult,
+    customBlocksResult,
     isFunctional
   )
 

lib/coffee-transformer.js renamed to lib/transformers/coffee.js

@@ -1,6 +1,6 @@
-const ensureRequire = require('./ensure-require.js')
-const throwError = require('./utils').throwError
-const getBabelOptions = require('./utils').getBabelOptions
+const ensureRequire = require('../ensure-require.js')
+const throwError = require('../utils').throwError
+const getBabelOptions = require('../utils').getBabelOptions
 
 module.exports = {
   process(src, filename, config) {