refactor: run renderToString tests in node environment

package.json

@@ -19,12 +19,13 @@
     "lint:fix": "npm run lint -- --fix",
     "prepublish": "npm run build && npm run test:unit:only",
     "publish": "lerna publish --conventional-commits -m \"chore(release): publish %s\"",
-    "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma",
+    "test": "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",
     "test:compat": "scripts/test-compat.sh",
     "test:unit": "npm run build:test && npm run test:unit:only",
-    "test:unit:only": "cross-env BABEL_ENV=test && 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 && cross-env BABEL_ENV=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 && cross-env BABEL_ENV=test TARGET=browser karma start test/setup/karma.conf.js --single-run",
+    "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 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:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types"
   },
   "devDependencies": {
@@ -37,6 +38,7 @@
     "babel-preset-flow-vue": "^1.0.0",
     "babel-preset-stage-2": "^6.24.1",
     "chai": "^4.0.0",
+    "cheerio": "^1.0.0-rc.2",
     "cross-env": "^5.0.0",
     "css-loader": "^0.28.4",
     "eslint": "^4.18.1",

packages/create-instance/add-slots.js

@@ -10,6 +10,9 @@ function addSlotToVm (vm: Component, slotName: string, slotValue: Component | st
     if (!compileToFunctions) {
       throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
     }
+    if (typeof window === 'undefined') {
+      throwError('the slots string option does not support strings in server-test-uitls.')
+    }
     if (window.navigator.userAgent.match(/PhantomJS/i)) {
       throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
     }

packages/server-test-utils/package.json

@@ -37,6 +37,9 @@
     "rollup-plugin-node-resolve": "^3.0.3",
     "typescript": "^2.6.2"
   },
+  "dependencies": {
+    "@vue/test-utils": "1.0.0-beta.14"
+  },
   "peerDependencies": {
     "vue": "2.x",
     "vue-server-renderer": "2.x",

packages/server-test-utils/scripts/build.js

@@ -35,7 +35,13 @@ const rollupOptions = process.env.NODE_ENV === 'test' ? rollupOptionsTest : roll
 rollupOptions.forEach(options => {
   rollup({
     input: resolve('src/index.js'),
-    external: ['vue', 'vue-template-compiler', 'vue-server-renderer', 'cheerio'],
+    external: [
+      'vue',
+      'vue-template-compiler',
+      'vue-server-renderer',
+      'cheerio',
+      '@vue/test-utils'
+    ],
     plugins: [
       flow(),
       json(),

packages/test-utils/src/matches-polyfill.js

@@ -1,4 +1,4 @@
-if (!Element.prototype.matches) {
+if (typeof Element !== 'undefined' && !Element.prototype.matches) {
   Element.prototype.matches =
         Element.prototype.matchesSelector ||
         Element.prototype.mozMatchesSelector ||

packages/test-utils/src/mount.js

@@ -1,6 +1,5 @@
 // @flow
 
-import './warn-if-no-window'
 import './matches-polyfill'
 import './object-assign-polyfill'
 import Vue from 'vue'
@@ -12,12 +11,14 @@ import errorHandler from './error-handler'
 import { findAllVueComponentsFromVm } from './find-vue-components'
 import { mergeOptions } from 'shared/merge-options'
 import config from './config'
+import warnIfNoWindow from './warn-if-no-window'
 
 Vue.config.productionTip = false
 Vue.config.devtools = false
 Vue.config.errorHandler = errorHandler
 
 export default function mount (component: Component, options: Options = {}): VueWrapper {
+  warnIfNoWindow()
   // Remove cached constructor
   delete component._Ctor
   const vueClass = options.localVue || createLocalVue()

packages/test-utils/src/warn-if-no-window.js

@@ -1,9 +1,11 @@
 import { throwError } from 'shared/util'
 
-if (typeof window === 'undefined') {
-  throwError(
-    'window is undefined, vue-test-utils needs to be run in a browser environment.\n' +
-    'You can run the tests in node using jsdom + jsdom-global.\n' +
-    'See https://vue-test-utils.vuejs.org/en/guides/common-tips.html for more details.'
-  )
+export default function warnIfNoWindow () {
+  if (typeof window === 'undefined') {
+    throwError(
+      'window is undefined, vue-test-utils needs to be run in a browser environment.\n' +
+      'You can run the tests in node using jsdom + jsdom-global.\n' +
+      'See https://vue-test-utils.vuejs.org/en/guides/common-tips.html for more details.'
+    )
+  }
 }

test/resources/utils.js

@@ -6,7 +6,10 @@ import { renderToString } from '~vue/server-test-utils'
 
 export const vueVersion = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
 
-export const isRunningJSDOM = navigator.userAgent.includes && navigator.userAgent.includes('jsdom')
+export const isRunningJSDOM =
+  typeof navigator !== 'undefined' &&
+  navigator.userAgent.includes &&
+  navigator.userAgent.includes('jsdom')
 
 export function injectSupported () {
   return vueVersion > 2.2
@@ -24,15 +27,20 @@ export function functionalSFCsSupported () {
   return vueVersion >= 2.5
 }
 
-const shallowAndMount = [mount, shallow]
-const shallowMountAndRender = isRunningJSDOM
-  ? [mount, shallow, renderToString]
+const shallowAndMount = process.env.TEST_ENV === 'node'
+  ? []
+  : [mount, shallow]
+console.log(shallowAndMount)
+const shallowMountAndRender = process.env.TEST_ENV === 'node'
+  ? [renderToString]
   : [mount, shallow]
 
 export function describeWithShallowAndMount (spec, cb) {
-  shallowAndMount.forEach(method => {
-    describe(`${spec} with ${method.name}`, () => cb(method))
-  })
+  if (shallowAndMount.length > 0) {
+    shallowAndMount.forEach(method => {
+      describe(`${spec} with ${method.name}`, () => cb(method))
+    })
+  }
 }
 
 describeWithShallowAndMount.skip = function (spec, cb) {
@@ -80,3 +88,9 @@ export function itDoNotRunIf (predicate, spec, cb) {
     it(spec, cb)
   }
 }
+
+export function describeIf (predicate, spec, cb) {
+  if (predicate) {
+    describe(spec, cb)
+  }
+}

test/setup/mocha.setup.js

@@ -1,4 +1,6 @@
-require('jsdom-global')()
+if (process.env.TEST_ENV !== 'node') {
+  require('jsdom-global')()
+}
 
 const chai = require('chai')
 const sinon = require('sinon')

test/setup/webpack.test.config.js

@@ -1,15 +1,11 @@
 const nodeExternals = require('webpack-node-externals')
+const webpack = require('webpack')
 const browser = process.env.TARGET === 'browser'
 const path = require('path')
 
 const projectRoot = path.resolve(__dirname, '../../')
-const isCoverage = process.env.NODE_ENV === 'coverage'
+
 const rules = [].concat(
-  isCoverage ? {
-    test: /\.js/,
-    include: path.resolve('dist'),
-    loader: 'istanbul-instrumenter-loader'
-  } : [],
   {
     test: /\.vue$/,
     loader: 'vue-loader'
@@ -41,5 +37,8 @@ module.exports = {
   node: {
     fs: 'empty',
     module: 'empty'
-  }
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin(['TEST_ENV'])
+  ]
 }

test/specs/components/RouterLink.spec.js

@@ -1,6 +1,7 @@
-import { mount, RouterLinkStub } from '~vue/test-utils'
+import { RouterLinkStub } from '~vue/test-utils'
+import { describeWithShallowAndMount } from '~resources/utils'
 
-describe('RouterLinkStub', () => {
+describeWithShallowAndMount('RouterLinkStub', (mountingMethod) => {
   it('takes correct props', () => {
     const TestComponent = {
       template: `
@@ -18,7 +19,7 @@ describe('RouterLinkStub', () => {
         </div>
       `
     }
-    const wrapper = mount(TestComponent, {
+    const wrapper = mountingMethod(TestComponent, {
       stubs: {
         RouterLink: RouterLinkStub
       }
@@ -42,7 +43,7 @@ describe('RouterLinkStub', () => {
         </div>
       `
     }
-    const wrapper = mount(TestComponent, {
+    const wrapper = mountingMethod(TestComponent, {
       stubs: {
         RouterLink: RouterLinkStub
       }

test/specs/components/TransitionGroupStub.spec.js

@@ -1,9 +1,10 @@
 import ComponentWithTransitionGroup from '~resources/components/component-with-transition-group.vue'
-import { mount, TransitionGroupStub } from '~vue/test-utils'
+import { TransitionGroupStub } from '~vue/test-utils'
+import { describeWithShallowAndMount } from '~resources/utils'
 
-describe('TransitionGroupStub', () => {
+describeWithShallowAndMount('TransitionGroupStub', (mountingMethod) => {
   it('update synchronously when used as stubs for Transition', () => {
-    const wrapper = mount(ComponentWithTransitionGroup, {
+    const wrapper = mountingMethod(ComponentWithTransitionGroup, {
       stubs: {
         'transition-group': TransitionGroupStub
       }
@@ -34,7 +35,7 @@ describe('TransitionGroupStub', () => {
      </transition-group>
     `
     }
-    const wrapper = mount(TestComponent, {
+    const wrapper = mountingMethod(TestComponent, {
       stubs: {
         'transition-group': TransitionGroupStub
       }

test/specs/config.spec.js

@@ -1,12 +1,7 @@
-import {
-  mount,
-  config,
-  TransitionStub,
-  TransitionGroupStub,
-  createLocalVue
-} from '~vue/test-utils'
-
-describe('config', () => {
+import { describeWithShallowAndMount, itDoNotRunIf } from '~resources/utils'
+import { config, TransitionStub, TransitionGroupStub, createLocalVue } from '~vue/test-utils'
+
+describeWithShallowAndMount('config', (mountingMethod) => {
   let configStubsSave
   beforeEach(() => {
     TransitionGroupStub.name = 'another-temp-name'
@@ -20,19 +15,20 @@ describe('config', () => {
     config.stubs = configStubsSave
   })
 
-  it('stubs transition and transition-group by default', () => {
-    const testComponent = {
-      template: `
+  itDoNotRunIf(mountingMethod.name === 'shallow',
+    'stubs transition and transition-group by default', () => {
+      const testComponent = {
+        template: `
         <div>
           <transition><p /></transition>
           <transition-group><p /><p /></transition-group>
         </div>
       `
-    }
-    const wrapper = mount(testComponent)
-    expect(wrapper.contains(TransitionStub)).to.equal(true)
-    expect(wrapper.contains(TransitionGroupStub)).to.equal(true)
-  })
+      }
+      const wrapper = mountingMethod(testComponent)
+      expect(wrapper.contains(TransitionStub)).to.equal(true)
+      expect(wrapper.contains(TransitionGroupStub)).to.equal(true)
+    })
 
   it('mocks a global variable', () => {
     const localVue = createLocalVue()
@@ -47,7 +43,7 @@ describe('config', () => {
 
     config.mocks['$t'] = 'mock value'
 
-    const wrapper = mount(testComponent, {
+    const wrapper = mountingMethod(testComponent, {
       localVue, t
     })
 
@@ -66,7 +62,7 @@ describe('config', () => {
 
     config.methods['val'] = () => 'method'
 
-    const wrapper = mount(testComponent)
+    const wrapper = mountingMethod(testComponent)
 
     expect(wrapper.vm.val()).to.equal('method')
     expect(wrapper.text()).to.equal('method')
@@ -81,7 +77,7 @@ describe('config', () => {
       `
     }
     config.stubs.transition = false
-    const wrapper = mount(testComponent)
+    const wrapper = mountingMethod(testComponent)
     expect(wrapper.contains(TransitionStub)).to.equal(false)
   })
 
@@ -94,7 +90,7 @@ describe('config', () => {
       `
     }
     config.stubs['transition-group'] = false
-    const wrapper = mount(testComponent)
+    const wrapper = mountingMethod(testComponent)
     expect(wrapper.contains(TransitionGroupStub)).to.equal(false)
   })
 
@@ -107,7 +103,7 @@ describe('config', () => {
         </div>
       `
     }
-    const wrapper = mount(testComponent)
+    const wrapper = mountingMethod(testComponent)
     expect(wrapper.contains(TransitionGroupStub)).to.equal(false)
     expect(wrapper.contains(TransitionStub)).to.equal(false)
   })
@@ -121,7 +117,7 @@ describe('config', () => {
         </div>
       `
     }
-    const wrapper = mount(testComponent)
+    const wrapper = mountingMethod(testComponent)
     expect(wrapper.contains(TransitionGroupStub)).to.equal(false)
     expect(wrapper.contains(TransitionStub)).to.equal(false)
   })