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

Allow testing src directly

Author: lmiller1990

Diff for: .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.

Diff for: 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",

Diff for: 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

Diff for: 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 }

Diff for: packages/test-utils/src/index.js

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

Diff for: 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]}`

Diff for: 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`
     }
   },

Diff for: 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 => {

Diff for: 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()

Diff for: 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'

Diff for: test/specs/create-wrapper.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { createWrapper, Wrapper, WrapperArray } from '~vue/test-utils'
+import { createWrapper, Wrapper, WrapperArray } from '@vue/test-utils'
 import Component from '~resources/components/component.vue'
 import { describeRunIf } from 'conditional-specs'
 

Diff for: test/specs/external-libraries.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, mount } from '~vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
 import VeeValidate from 'vee-validate'
 import { describeWithShallowAndMount } from '~resources/utils'
 

Diff for: test/specs/mount.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { compileToFunctions } from 'vue-template-compiler'
-import { mount, createLocalVue } from '~vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Component from '~resources/components/component.vue'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import ComponentWithMixin from '~resources/components/component-with-mixin.vue'

Diff for: test/specs/mounting-options/localVue.spec.js

@@ -4,7 +4,7 @@ import {
   isRunningPhantomJS,
   vueVersion
 } from '~resources/utils'
-import { createLocalVue, shallowMount, mount } from '~vue/test-utils'
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
 import { itSkipIf, itRunIf, itDoNotRunIf } from 'conditional-specs'
 import Vuex from 'vuex'
 

Diff for: test/specs/mounting-options/methods.spec.js

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

Diff for: test/specs/mounting-options/mocks.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, config } from '~vue/test-utils'
+import { createLocalVue, config } from '@vue/test-utils'
 import Vue from 'vue'
 import Component from '~resources/components/component.vue'
 import ComponentWithVuex from '~resources/components/component-with-vuex.vue'

Diff for: test/specs/mounting-options/propsData.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '~vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import ComponentWithProps from '~resources/components/component-with-props.vue'
 import { describeRunIf } from 'conditional-specs'
 

Diff for: test/specs/mounting-options/provide.spec.js

@@ -1,5 +1,5 @@
-import { config } from '~vue/test-utils'
-import { createLocalVue } from '~vue/test-utils'
+import { config } from '@vue/test-utils'
+import { createLocalVue } from '@vue/test-utils'
 import ComponentWithInject from '~resources/components/component-with-inject.vue'
 import CompositionComponentWithInject from '~resources/components/component-with-inject-composition.vue'
 import { injectSupported } from '~resources/utils'

Diff for: test/specs/mounting-options/scopedSlots.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
-import { createLocalVue } from '~vue/test-utils'
+import { createLocalVue } from '@vue/test-utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 import { itDoNotRunIf } from 'conditional-specs'
 import Vue from 'vue'

Diff for: test/specs/mounting-options/slots.spec.js

@@ -5,7 +5,7 @@ import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
 import ComponentWithParentName from '~resources/components/component-with-parent-name.vue'
 import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
 import { itDoNotRunIf } from 'conditional-specs'
-import { mount, createLocalVue } from '~vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 
 describeWithShallowAndMount('options.slots', mountingMethod => {
   it('mounts component with default slot if passed component in slot object', () => {
@@ -138,10 +138,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
     require.cache[
       require.resolve('vue-template-compiler')
     ].exports.compileToFunctions = undefined
-    delete require.cache[require.resolve('../../../packages/test-utils')]
-    const mountingMethodFresh = require('../../../packages/test-utils')[
-      mountingMethod.name
-    ]
+    delete require.cache[require.resolve('@vue/test-utils')]
+    const mountingMethodFresh = require('@vue/test-utils')[mountingMethod.name]
     const message =
       '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass precompiled components if vue-template-compiler is undefined'
     const fn = () =>
@@ -391,13 +389,12 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
     const compilerSave =
       require.cache[require.resolve('vue-template-compiler')].exports
         .compileToFunctions
-    require.cache[require.resolve('vue-template-compiler')].exports = {
-      compileToFunctions: undefined
-    }
-    delete require.cache[require.resolve('../../../packages/test-utils')]
-    const mountingMethodFresh = require('../../../packages/test-utils')[
-      mountingMethod.name
-    ]
+    require.cache[
+      require.resolve('vue-template-compiler')
+    ].exports.compileToFunctions = undefined
+
+    delete require.cache[require.resolve('@vue/test-utils')]
+    const mountingMethodFresh = require('@vue/test-utils')[mountingMethod.name]
     const message =
       '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass precompiled components if vue-template-compiler is undefined'
     const fn = () => {

Diff for: test/specs/mounting-options/stubs.spec.js

@@ -2,8 +2,8 @@ import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue'
 import Component from '~resources/components/component.vue'
 import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
-import { createLocalVue, config } from '~vue/test-utils'
-import { config as serverConfig } from '~vue/server-test-utils'
+import { createLocalVue, config } from '@vue/test-utils'
+import { config as serverConfig } from '@vue/server-test-utils'
 import Vue from 'vue'
 import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
 import { itDoNotRunIf, itSkipIf, itRunIf } from 'conditional-specs'
@@ -263,11 +263,9 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     require.cache[
       require.resolve('vue-template-compiler')
     ].exports.compileToFunctions = undefined
-    delete require.cache[require.resolve('../../../packages/test-utils')]
-    delete require.cache[require.resolve('../../../packages/server-test-utils')]
-    const mountingMethodFresh = require('../../../packages/test-utils')[
-      mountingMethod.name
-    ]
+    delete require.cache[require.resolve('@vue/test-utils')]
+    delete require.cache[require.resolve('@vue/server-test-utils')]
+    const mountingMethodFresh = require('@vue/test-utils')[mountingMethod.name]
     const message =
       '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass precompiled components if vue-template-compiler is undefined'
     const fn = () =>

Diff for: test/specs/render.spec.js

@@ -1,4 +1,4 @@
-import { render } from '~vue/server-test-utils'
+import { render } from '@vue/server-test-utils'
 import Cheerio from 'cheerio'
 import { describeDoNotRunIf } from 'conditional-specs'
 

Diff for: test/specs/renderToString.spec.js

@@ -1,5 +1,5 @@
-import { renderToString } from '~vue/server-test-utils'
-import { createLocalVue } from '~vue/test-utils'
+import { renderToString } from '@vue/server-test-utils'
+import { createLocalVue } from '@vue/test-utils'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import { describeDoNotRunIf } from 'conditional-specs'
 

Diff for: test/specs/shallow-mount.spec.js

@@ -1,6 +1,6 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import Vue from 'vue'
-import { mount, shallowMount, createLocalVue } from '~vue/test-utils'
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import Component from '~resources/components/component.vue'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue'

Diff for: test/specs/wrapper-array.spec.js

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

Diff for: test/specs/wrapper-array/at.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount } from '~resources/utils'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('at', mountingMethod => {
   it('returns Wrapper at index', () => {

Diff for: test/specs/wrapper-array/attributes.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount } from '~resources/utils'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('attributes', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/classes.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount } from '~resources/utils'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('classes', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/contains.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount } from '~resources/utils'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('contains', mountingMethod => {
   it('returns true if every Wrapper contains element', () => {

Diff for: test/specs/wrapper-array/find.spec.js

@@ -1,5 +1,5 @@
 import { describeWithShallowAndMount } from '~resources/utils'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('find', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/findAll.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('findAll', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/html.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('html', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/isEmpty.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('isEmpty', mountingMethod => {
   it('returns true if node is empty', () => {

Diff for: test/specs/wrapper-array/isVisible.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('isVisible', mountingMethod => {
   it('returns true if node has no inline style', () => {

Diff for: test/specs/wrapper-array/name.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('name', mountingMethod => {
   it('throws an error when called on a WrapperArray', () => {

Diff for: test/specs/wrapper-array/props.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('props', mountingMethod => {
   it('throws error if wrapper array contains no items', () => {

Diff for: test/specs/wrapper-array/text.spec.js

@@ -1,6 +1,6 @@
 import { describeWithShallowAndMount } from '~resources/utils'
 import { compileToFunctions } from 'vue-template-compiler'
-import '~vue/test-utils'
+import '@vue/test-utils'
 
 describeWithShallowAndMount('text', mountingMethod => {
   it('throws error when called on a WrapperArray', () => {

Diff for: test/specs/wrapper/emitted.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, createWrapper } from '~vue/test-utils'
+import { createLocalVue, createWrapper } from '@vue/test-utils'
 import { describeWithShallowAndMount, vueVersion } from '~resources/utils'
 import { itDoNotRunIf } from 'conditional-specs'
 import Vue from 'vue'