Migrate to jest 2

.eslintrc

@@ -2,7 +2,8 @@
   "globals": {
     "wrapper": true,
     "expect": true,
-    "Element": true
+    "Element": true,
+    "jest": true
   },
   "root": true,
   "plugins": [
@@ -13,6 +14,7 @@
     "plugin:flowtype/recommended"
   ],
   "rules": {
+    "template-curly-spacing" : "off",
     "no-debugger": 2,
     "no-proto": 0,
     "space-before-function-paren": 0,

babel.config.js

@@ -1,5 +1,15 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
+const defaultOptions = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    '@vue/babel-preset-jsx'
+  ],
   plugins: [
     '@babel/plugin-syntax-jsx',
     '@babel/plugin-transform-flow-strip-types',
@@ -9,3 +19,25 @@ module.exports = {
   ],
   comments: false
 }
+
+module.exports = api => {
+  if (api.env('browser')) {
+    // If running in the browser, use core-js to polyfill potentially missing functionality
+    return {
+      ...defaultOptions,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            // currently, there are dependency resolution issues with older versions of vuepress. Once vuepress is upgraded, core-js can be moved to version 3
+            corejs: 2,
+            useBuiltIns: 'entry'
+          }
+        ],
+        '@vue/babel-preset-jsx'
+      ]
+    }
+  } else {
+    return defaultOptions
+  }
+}

docs/api/wrapper-array/setChecked.md

@@ -31,9 +31,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal(false)
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual(false)
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setChecked()
-expect(wrapper.vm.t1).to.equal(true)
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual(true)
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/api/wrapper-array/setValue.md

@@ -30,9 +30,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal('')
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual('')
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setValue('foo')
-expect(wrapper.vm.t1).to.equal('foo')
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual('foo')
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/ja/api/wrapper-array/setChecked.md

@@ -31,9 +31,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal(false)
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual(false)
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setChecked()
-expect(wrapper.vm.t1).to.equal(true)
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual(true)
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/ja/api/wrapper-array/setValue.md

@@ -30,9 +30,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal('')
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual('')
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setValue('foo')
-expect(wrapper.vm.t1).to.equal('foo')
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual('foo')
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/ru/api/wrapper-array/setChecked.md

@@ -31,9 +31,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal(false)
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual(false)
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setChecked()
-expect(wrapper.vm.t1).to.equal(true)
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual(true)
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/ru/api/wrapper-array/setValue.md

@@ -30,9 +30,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal('')
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual('')
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setValue('foo')
-expect(wrapper.vm.t1).to.equal('foo')
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual('foo')
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/zh/api/wrapper-array/setChecked.md

@@ -31,9 +31,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal(false)
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual(false)
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setChecked()
-expect(wrapper.vm.t1).to.equal(true)
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual(true)
+expect(wrapper.vm.t2).toEqual('foo')
 ```

docs/zh/api/wrapper-array/setValue.md

@@ -30,9 +30,9 @@ const wrapper = mount({
 })
 
 const wrapperArray = wrapper.findAll('.foo')
-expect(wrapper.vm.t1).to.equal('')
-expect(wrapper.vm.t2).to.equal('')
+expect(wrapper.vm.t1).toEqual('')
+expect(wrapper.vm.t2).toEqual('')
 wrapperArray.setValue('foo')
-expect(wrapper.vm.t1).to.equal('foo')
-expect(wrapper.vm.t2).to.equal('foo')
+expect(wrapper.vm.t1).toEqual('foo')
+expect(wrapper.vm.t2).toEqual('foo')
 ```

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  moduleNameMapper: {
+    '^~(.*)$': '<rootDir>/test/$1',
+    '^packages/(.*)$': '<rootDir>/packages/$1',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
+  },
+  transform: {
+    '.*\\.(vue)$': 'vue-jest',
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
+  }
+}

package.json

@@ -19,89 +19,82 @@
     "format": "prettier --write \"**/*.{js,json,vue,md}\"",
     "format:check": "prettier --check \"**/*.{js,json,vue,md}\"",
     "release": "yarn build && yarn test:unit:only && lerna publish --conventional-commits -m \"chore(release): publish %s\"",
-    "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": "yarn format:check && yarn lint && yarn lint:docs && yarn flow && yarn test:types && yarn test:unit -w 1 && yarn test:unit:browser",
     "test:compat": "scripts/test-compat.sh",
-    "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: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": "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:unit": "cross-env TARGET=dev yarn jest",
+    "test:unit:browser": "cross-env TEST_ENV=browser TARGET=browser NODE_ENV=browser karma start ./test/setup/karma.config.js",
     "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "babel-eslint": "^9.0.0",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-    "@vue/babel-preset-jsx": "^1.1.2",
-    "babel-loader": "^8.0.0",
-    "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-syntax-flow": "^7.0.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "chai": "^4.0.0",
     "chalk": "^2.4.2",
     "conditional-specs": "^1.0.1",
     "conventional-changelog": "^3.1.12",
     "cross-env": "^5.0.0",
-    "css-loader": "^0.28.4",
     "eslint": "^4.18.1",
     "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-vue-libs": "^2.1.0",
     "flow-bin": "^0.66.0",
-    "jsdom": "^12.0.0",
-    "jsdom-global": "^3.0.2",
-    "karma": "^3.1.4",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sinon-chai": "^2.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^2.0.3",
     "lerna": "^3.20.2",
     "markdown-it-include": "^1.0.0",
-    "mocha": "^5.2.0",
-    "mocha-webpack": "^1.0.1",
     "rollup": "1",
     "rollup-plugin-buble": "^0.19",
     "rollup-plugin-commonjs": "10",
     "rollup-plugin-flow-no-whitespace": "1",
     "rollup-plugin-json": "4",
     "rollup-plugin-node-resolve": "5",
     "semver": "^6.3.0",
-    "sinon": "^7.2.3",
-    "sinon-chai": "^3.3.0",
     "typescript": "3",
     "vee-validate": "^2.1.3",
     "vue": "^2.6.11",
-    "vue-class-component": "^6.1.2",
-    "vue-loader": "^13.6.2",
+    "vue-class-component": "^7.2.3",
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.6.11",
     "vue-template-compiler": "^2.6.11",
     "vuepress": "^0.14.8",
     "vuepress-theme-vue": "^1.0.3",
-    "vuex": "^3.0.1",
-    "webpack": "^3.0.1",
-    "webpack-node-externals": "^2.5.0"
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-syntax-flow": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-jsx": "^1.1.2",
     "@vue/composition-api": "^0.6.4",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^26.0.1",
+    "babel-loader": "^8.1.0",
     "commitizen": "^4.0.3",
+    "core-js": "2",
+    "css-loader": "^4.2.0",
     "cz-conventional-changelog": "^3.0.2",
+    "expect": "^26.2.0",
     "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.0.1",
+    "jest-mock": "^26.2.0",
+    "karma": "^5.1.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^3.3.1",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^4.0.2",
     "lint-staged": "^9.5.0",
     "prettier": "^1.16.0",
+    "puppeteer": "^5.2.1",
     "rollup-plugin-delete": "^1.2.0",
-    "rollup-plugin-replace": "^2.2.0"
+    "rollup-plugin-replace": "^2.2.0",
+    "vue-jest": "^4.0.0-beta.3",
+    "vue-loader": "^15.9.3",
+    "vue-style-loader": "^4.1.2",
+    "webpack": "^4.44.1",
+    "webpack-node-externals": "^2.5.0"
   },
   "config": {
     "commitizen": {

packages/test-utils/src/wrapper.js

@@ -716,7 +716,9 @@ export default class Wrapper implements BaseWrapper {
           const isUpdated = Object.keys(data).some(key => {
             return (
               // $FlowIgnore : Problem with possibly null this.vm
-              this.vm[key] === data[key] || this.vm.$attrs[key] === data[key]
+              this.vm[key] === data[key] ||
+              // $FlowIgnore : Problem with possibly null this.vm
+              (this.vm.$attrs && this.vm.$attrs[key] === data[key])
             )
           })
           return !isUpdated ? this.setProps(data).then(resolve()) : resolve()

scripts/test-compat.sh

@@ -2,11 +2,20 @@
 
 set -e
 
+apt-get install bc
+
 run() {
-  echo "running unit tests with Vue $1"
-  yarn add --pure-lockfile --non-interactive -W -D "vue@$1" "vue-template-compiler@$1" "vue-server-renderer@$1"
-  yarn test:unit:only
-  yarn test:unit:karma:only
+  # Only run tests for vue versions above 2.1.
+  # There are quite a few errors present with running the tests in Vue 2.1 and Vue 2.0, including in Node and in browser
+  browserTestCutoff="2.1"
+
+  if [ 1 -eq "$(echo "${browserTestCutoff} < ${1}" | bc)" ]
+  then
+      echo "running unit tests with Vue $1"
+      yarn add --pure-lockfile --non-interactive -W -D "vue@$1" "vue-template-compiler@$1" "vue-server-renderer@$1"
+      yarn test:unit -w 1
+      yarn test:unit:browser
+  fi
 }
 
 yarn build:test

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 'packages/test-utils/src'
+import { renderToString } from 'packages/server-test-utils/src'
 
 export const vueVersion = Number(
   `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`
@@ -13,10 +13,10 @@ export const isRunningJSDOM =
   navigator.userAgent.includes &&
   navigator.userAgent.includes('jsdom')
 
-export const isRunningPhantomJS =
+export const isRunningChrome =
   typeof navigator !== 'undefined' &&
   navigator.userAgent.includes &&
-  navigator.userAgent.match(/PhantomJS/i)
+  navigator.userAgent.match(/Chrome/i)
 
 export const injectSupported = vueVersion > 2.2