feat: use babel-jest to compile (vuejs#127)

Author: eddyerburgh

lib/compilers/babel-compiler.js

@@ -1,16 +1,16 @@
-var ensureRequire = require('../ensure-require.js')
+const ensureRequire = require('../ensure-require.js')
 const throwError = require('../throw-error')
 const loadBabelConfig = require('../load-babel-config.js')
 
-module.exports = function (raw, vueJestConfig, filePath) {
+module.exports = function (raw, config, filePath) {
   ensureRequire('coffee', ['coffeescript'])
   var coffee = require('coffeescript')
   var compiled
   try {
     compiled = coffee.compile(raw, {
       bare: true,
       sourceMap: true,
-      transpile: loadBabelConfig(vueJestConfig, filePath)
+      transpile: loadBabelConfig(config, filePath)
     })
   } catch (err) {
     throwError(err)

lib/compilers/coffee-compiler.js

@@ -1,10 +1,12 @@
 const ensureRequire = require('../ensure-require')
-const compileBabel = require('./babel-compiler')
 const loadBabelConfig = require('../load-babel-config.js')
 const { loadTypescriptConfig } = require('../load-typescript-config')
+const babelJest = require('babel-jest')
+const getVueJestConfig = require('../get-vue-jest-config')
 
-module.exports = function compileTypescript (scriptContent, vueJestConfig, filePath) {
+module.exports = function compileTypescript (scriptContent, filePath, config) {
   ensureRequire('typescript', ['typescript'])
+  const vueJestConfig = getVueJestConfig(config)
   const typescript = require('typescript')
   const tsConfig = loadTypescriptConfig(vueJestConfig)
 
@@ -15,14 +17,19 @@ module.exports = function compileTypescript (scriptContent, vueJestConfig, fileP
 
   // handle ES modules in TS source code in case user uses non commonjs module
   // output and there is no .babelrc.
-  let inlineBabelConfig
-  if (tsConfig.compilerOptions.module !== 'commonjs' && !loadBabelConfig(vueJestConfig, filePath)) {
+  let inlineBabelConfig = {}
+  if (tsConfig.compilerOptions.module !== 'commonjs' && !loadBabelConfig(vueJestConfig)) {
     inlineBabelConfig = {
       plugins: [
         require('babel-plugin-transform-es2015-modules-commonjs')
       ]
     }
   }
-
-  return compileBabel(res.outputText, inputSourceMap, inlineBabelConfig, vueJestConfig)
+  const transformer = babelJest.createTransformer(Object.assign(
+    inlineBabelConfig,
+    {
+      inputSourceMap
+    }
+  ))
+  return transformer.process(res.outputText, filePath, config)
 }

lib/compilers/typescript-compiler.js

@@ -4,8 +4,11 @@ const cache = require('./cache')
 const deprecate = require('./deprecate')
 const path = require('path')
 const { readFileSync, existsSync } = require('fs')
+const getVueJestConfig = require('./get-vue-jest-config')
+
+module.exports = function getBabelConfig (config, filePath) {
+  const vueJestConfig = getVueJestConfig(config)
 
-module.exports = function getBabelConfig (vueJestConfig, filePath) {
   const find = () => {
     const { file, config } = findBabelConfig.sync(filePath || process.cwd())
 

lib/load-babel-config.js

@@ -1,7 +1,7 @@
 const tsconfig = require('tsconfig')
 const cache = require('./cache')
-const deprecate = require('./deprecate')
 const logger = require('./logger')
+const getVueJestConfig = require('./get-vue-jest-config')
 
 const defaultTypescriptConfig = {
   'compilerOptions': {
@@ -27,7 +27,9 @@ const defaultTypescriptConfig = {
   }
 }
 
-module.exports.loadTypescriptConfig = function loadTypescriptConfig (vueJestConfig) {
+module.exports.loadTypescriptConfig = function loadTypescriptConfig (config) {
+  const vueJestConfig = getVueJestConfig(config)
+
   const find = () => {
     const { path, config } = tsconfig.loadSync(process.cwd())
 
@@ -43,10 +45,7 @@ module.exports.loadTypescriptConfig = function loadTypescriptConfig (vueJestConf
   } else {
     let typescriptConfig
 
-    if (vueJestConfig.tsConfigFile) {
-      deprecate.replace('tsConfigFile', 'tsConfig')
-      typescriptConfig = tsconfig.readFileSync(vueJestConfig.tsConfigFile)
-    } else if (vueJestConfig.hasOwnProperty('tsConfig')) {
+    if (vueJestConfig.hasOwnProperty('tsConfig')) {
       switch (typeof vueJestConfig.tsConfig) {
         case 'string':
           // a path to a config file is being passed in; load it

lib/load-typescript-config.js

@@ -2,7 +2,6 @@ const vueCompiler = require('vue-template-compiler')
 const compileTemplate = require('./template-compiler')
 const generateSourceMap = require('./generate-source-map')
 const addTemplateMapping = require('./add-template-mapping')
-const compileBabel = require('./compilers/babel-compiler')
 const compileTypescript = require('./compilers/typescript-compiler')
 const compileCoffeeScript = require('./compilers/coffee-compiler')
 const processStyle = require('./process-style')
@@ -12,35 +11,35 @@ const path = require('path')
 const join = path.join
 const logger = require('./logger')
 const splitRE = /\r?\n/g
+const babelJest = require('babel-jest')
 
-function processScript (scriptPart, vueJestConfig, filePath) {
+function processScript (scriptPart, filePath, config) {
   if (!scriptPart) {
     return { code: '' }
   }
 
   if (/^typescript|tsx?$/.test(scriptPart.lang)) {
-    return compileTypescript(scriptPart.content, vueJestConfig, filePath)
+    return compileTypescript(scriptPart.content, filePath, config)
   }
 
   if (scriptPart.lang === 'coffee' || scriptPart.lang === 'coffeescript') {
-    return compileCoffeeScript(scriptPart.content, vueJestConfig, filePath)
+    return compileCoffeeScript(scriptPart.content, config, filePath)
   }
 
-  return compileBabel(scriptPart.content, undefined, undefined, vueJestConfig, filePath)
+  return babelJest.process(scriptPart.content, filePath, config)
 }
 
-module.exports = function (src, filePath, jestConfig) {
-  const vueJestConfig = getVueJestConfig(jestConfig)
-
+module.exports = function (src, filePath, config) {
+  const vueJestConfig = getVueJestConfig(config)
   var parts = vueCompiler.parseComponent(src, { pad: true })
 
   if (parts.script && parts.script.src) {
     parts.script.content = fs.readFileSync(join(filePath, '..', parts.script.src), 'utf8')
   }
 
-  const result = processScript(parts.script, vueJestConfig, filePath)
+  const result = processScript(parts.script, filePath, config)
   const script = result.code
-  const inputMap = result.sourceMap
+  const inputMap = result.map
 
   let scriptSrc = src
   if (parts.script && parts.script.src) {
@@ -89,7 +88,7 @@ module.exports = function (src, filePath, jestConfig) {
       .map(ast => {
         const styleObj = (/^less|pcss|postcss/.test(ast.lang))
           ? {}
-          : processStyle(ast, filePath, jestConfig)
+          : processStyle(ast, filePath, config)
 
         const moduleName = ast.module === true ? '$style' : ast.module
 

lib/process.js

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.25.0",
-    "babel-jest": "^20.0.3",
+    "babel-jest": "^23.6.0",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-preset-env": "^1.6.1",
     "clear-module": "^2.1.0",
@@ -44,7 +44,7 @@
     "eslint-plugin-vue-libs": "^1.2.0",
     "hamljs": "^0.6.2",
     "jade": "^1.11.0",
-    "jest": "^20.0.4",
+    "jest": "^23.6.0",
     "node-sass": "^4.7.2",
     "pug": "^2.0.0-rc.3",
     "stylus": "^0.54.5",
@@ -54,6 +54,7 @@
   },
   "peerDependencies": {
     "babel-core": "^6.25.0 || ^7.0.0-0",
+    "jest": "^23.x",
     "vue": "^2.x",
     "vue-template-compiler": "^2.x"
   },
@@ -79,10 +80,16 @@
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/vue-jest.js"
     },
-    "mapCoverage": true,
     "moduleNameMapper": {
       "^~?__root/(.*)$": "<rootDir>/$1",
       "^~?__test/(.*)$": "<rootDir>/test/$1"
+    },
+    "globals": {
+      "vue-jest": {
+        "pug": {
+          "basedir": "test"
+        }
+      }
     }
   },
   "repository": {

package.json

@@ -1,13 +1,6 @@
 import Vue from 'vue'
 import Basic from './resources/Basic.vue'
 import BasicSrc from './resources/BasicSrc.vue'
-import jestVue from '../vue-jest'
-import { resolve } from 'path'
-import {
-  readFileSync,
-  writeFileSync,
-  renameSync
-} from 'fs'
 import clearModule from 'clear-module'
 import cache from '../lib/cache'
 
@@ -25,99 +18,5 @@ test('processes .vue files', () => {
 test('processes .vue files using src attributes', () => {
   const vm = new Vue(BasicSrc).$mount()
   expect(typeof vm.$el).toBe('object')
-})
-
-test('skip processing if there is no .babelrc', () => {
-  const babelRcPath = resolve(__dirname, '../.babelrc')
-  const babelRcPath2 = resolve(__dirname, '../../.babelrc')
-  const tempPath = resolve(__dirname, '../.renamed')
-  const tempPath2 = resolve(__dirname, '../../.renamed')
-  renameSync(babelRcPath, tempPath)
-  renameSync(babelRcPath2, tempPath2)
-  const filePath = resolve(__dirname, './resources/Basic.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-  try {
-    jestVue.process(fileString, filePath)
-  } catch (err) {
-    renameSync(tempPath, babelRcPath)
-    renameSync(tempPath2, babelRcPath2)
-    throw err
-  }
-  renameSync(tempPath, babelRcPath)
-  renameSync(tempPath2, babelRcPath2)
-})
-
-test('logs info when there is no .babelrc', () => {
-  const babelRcPath = resolve(__dirname, '../.babelrc')
-  const babelRcPath2 = resolve(__dirname, '../../.babelrc')
-  const tempPath = resolve(__dirname, '../.renamed')
-  const tempPath2 = resolve(__dirname, '../../.renamed')
-  renameSync(babelRcPath, tempPath)
-  renameSync(babelRcPath2, tempPath2)
-  const info = jest.spyOn(global.console, 'info')
-  const filePath = resolve(__dirname, './resources/Basic.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-
-  jestVue.process(fileString, filePath)
-  try {
-    expect(info).toHaveBeenCalledWith('\n[vue-jest]: no .babelrc found, skipping babel compilation\n')
-  } catch (err) {
-    renameSync(tempPath, babelRcPath)
-    renameSync(tempPath2, babelRcPath2)
-    throw err
-  }
-  renameSync(tempPath, babelRcPath)
-  renameSync(tempPath2, babelRcPath2)
-  jest.resetModules()
-})
-
-test('uses babelrc in package.json if none in .babelrc', () => {
-  const babelRcPath = resolve(__dirname, '../.babelrc')
-  const tempPath = resolve(__dirname, '../.renamed')
-  const packagePath = resolve(__dirname, '../package.json')
-  const packageOriginal = readFileSync(packagePath, { encoding: 'utf8' })
-  writeFileSync(packagePath, '{ "babel": {"presets": ["env"],"plugins": ["istanbul"]}}')
-  renameSync(babelRcPath, tempPath)
-  const filePath = resolve(__dirname, './resources/Basic.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-
-  try {
-    const output = jestVue.process(fileString, filePath)
-    expect(output.code).toContain('coverageData.hash')
-  } catch (err) {
-    renameSync(tempPath, babelRcPath)
-    writeFileSync(packagePath, packageOriginal)
-    jest.resetModules()
-    throw err
-  }
-  renameSync(tempPath, babelRcPath)
-  writeFileSync(packagePath, packageOriginal)
-  jest.resetModules()
-})
-
-test('processes .vue files using .babelrc if it exists in route', () => {
-  const babelRcPath = resolve(__dirname, '../.babelrc')
-  const babelRcOriginal = readFileSync(babelRcPath, { encoding: 'utf8' })
-  writeFileSync(babelRcPath, '{"presets": ["env"],"plugins": ["istanbul"]}')
-  const filePath = resolve(__dirname, './resources/Basic.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-
-  const output = jestVue.process(fileString, filePath)
-  writeFileSync(babelRcPath, babelRcOriginal)
-  // coverageData.hash is added by babel-plugin-istanbul, added to root .babelrc for this test only
-  expect(output.code).toContain('coverageData.hash')
-})
-
-test('generates inline sourcemap', () => {
-  const filePath = resolve(__dirname, './resources/Basic.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-  const output = jestVue.process(fileString, filePath)
-  expect(output.code).toMatchSnapshot()
-})
-
-test('generates inline sourcemap for .vue files using src attributes', () => {
-  const filePath = resolve(__dirname, './resources/BasicSrc.vue')
-  const fileString = readFileSync(filePath, { encoding: 'utf8' })
-  const output = jestVue.process(fileString, filePath)
-  expect(output.code).toMatchSnapshot()
+  vm.toggleClass()
 })