Merge pull request #1396 from vuejs/feat/allow-testing-src-directly

Allow testing src directly

Author: lmiller1990

.github/CONTRIBUTING.md

@@ -59,6 +59,9 @@ $ yarn test:unit
 
 # run the full test suite, include linting / type checking
 $ yarn test
+
+# run tests against src files only. Allows inline debugging.
+$ yarn test:unit:only:dev
 ```
 
 There are some other scripts available in the `scripts` section of the `package.json` file.

package.json

@@ -15,24 +15,26 @@
     "flow": "flow check",
     "lint": "eslint --ext js,vue . --ignore-path .gitignore",
     "lint:docs": "eslint --ext js,vue,md docs --ignore-path .gitignore",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "yarn lint -- --fix",
     "format": "prettier --write \"**/*.{js,json,vue,md}\"",
     "format:check": "prettier --check \"**/*.{js,json,vue,md}\"",
-    "release": "npm run build && npm run test:unit:only && lerna publish --conventional-commits -m \"chore(release): publish %s\" --cd-version prerelease",
-    "test": "npm run format:check && npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma && npm run test:unit:node",
+    "release": "yarn build && yarn test:unit:only && lerna publish --conventional-commits -m \"chore(release): publish %s\" --cd-version prerelease",
+    "test": "yarn format:check && yarn lint && yarn lint:docs && yarn flow && yarn test:types && yarn test:unit && yarn test:unit:karma && yarn test:unit:node",
     "test:compat": "scripts/test-compat.sh",
-    "test:unit": "npm run build:test && npm run test:unit:only",
+    "test:unit": "yarn build:test && yarn test:unit:only",
     "test:unit:only": "mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
-    "test:unit:debug": "npm run build:test && node --inspect-brk node_modules/.bin/mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
-    "test:unit:karma": "npm run build:test && npm run test:unit:karma:only",
+    "test:unit:only:dev": "cross-env TARGET=dev yarn test:unit:only",
+    "test:unit:debug": "yarn build:test && node --inspect-brk node_modules/.bin/mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
+    "test:unit:karma": "yarn build:test && yarn test:unit:karma:only",
     "test:unit:karma:only": "cross-env TARGET=browser karma start test/setup/karma.conf.js --single-run",
-    "test:unit:node": "npm run build:test && npm run test:unit:node:only",
+    "test:unit:node": "yarn build:test && yarn test:unit:node:only",
     "test:unit:node:only": "cross-env TEST_ENV=node mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs/render.spec.js test/specs/renderToString.spec.js --require test/setup/mocha.setup.js",
     "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types"
   },
   "dependencies": {
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",

packages/server-test-utils/src/config.js

@@ -1,3 +1,3 @@
-import testUtils from '@vue/test-utils'
+import * as testUtils from '@vue/test-utils'
 
 export default testUtils.config

packages/server-test-utils/src/index.js

@@ -2,8 +2,4 @@ import renderToString from './renderToString'
 import render from './render'
 import config from './config'
 
-export default {
-  renderToString,
-  config,
-  render
-}
+export { renderToString, config, render }

packages/test-utils/src/index.js

@@ -16,7 +16,7 @@ function shallow(component, options) {
   return shallowMount(component, options)
 }
 
-export default {
+export {
   createLocalVue,
   createWrapper,
   config,

test/resources/utils.js

@@ -1,8 +1,8 @@
 /* global describe */
 
 import Vue from 'vue'
-import { shallowMount, mount } from '~vue/test-utils'
-import { renderToString } from '~vue/server-test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
+import { renderToString } from '@vue/server-test-utils'
 
 export const vueVersion = Number(
   `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`

test/setup/webpack.test.config.js

@@ -15,19 +15,35 @@ const rules = [].concat(
   {
     test: /\.js$/,
     loader: 'babel-loader',
-    exclude: /node_modules\/(?!(shared|create-instance)\/).*/
+    exclude: /node_modules/
   }
 )
-
+const externals = nodeExternals({
+  // we need to whitelist both `create-instance` and files in `shared` package. Otherwise webpack won't bundle them in the test dev env
+  whitelist: [
+    '@vue/test-utils',
+    '@vue/server-test-utils',
+    'create-instance',
+    /^shared\/.*/
+  ]
+})
+// define the default aliases
+let aliasedFiles = {}
+if (process.env.TARGET === 'dev') {
+  // if we are in dev test mode, we want to alias all files to the src file, not dist
+  aliasedFiles = {
+    '@vue/server-test-utils': `@vue/server-test-utils/src/index.js`,
+    '@vue/test-utils': `@vue/test-utils/src/index.js`
+  }
+}
 module.exports = {
   module: {
     rules
   },
-  externals: !browser ? [nodeExternals()] : undefined,
+  externals: !browser ? [externals] : undefined,
   resolve: {
     alias: {
-      '~vue/server-test-utils': `${projectRoot}/packages/server-test-utils/dist/vue-server-test-utils.js`,
-      '~vue/test-utils': `${projectRoot}/packages/test-utils/dist/vue-test-utils.js`,
+      ...aliasedFiles,
       '~resources': `${projectRoot}/test/resources`
     }
   },

test/specs/components/RouterLink.spec.js

@@ -1,4 +1,4 @@
-import { RouterLinkStub } from '~vue/test-utils'
+import { RouterLinkStub } from '@vue/test-utils'
 import { describeWithShallowAndMount } from '~resources/utils'
 
 describeWithShallowAndMount('RouterLinkStub', mountingMethod => {

test/specs/config.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
-import { config, createLocalVue } from '~vue/test-utils'
+import { config, createLocalVue } from '@vue/test-utils'
 
 describeWithShallowAndMount('config', mountingMethod => {
   const sandbox = sinon.createSandbox()

test/specs/create-local-vue.spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
-import { createLocalVue } from '~vue/test-utils'
+import { createLocalVue } from '@vue/test-utils'
 import Component from '~resources/components/component.vue'
 import ComponentWithVuex from '~resources/components/component-with-vuex.vue'
 import ComponentWithRouter from '~resources/components/component-with-router.vue'