Migrate to jest 2 (#1629)

* refactor: use jest

* refactor: strip flow types when running tests with jest

* refactor: update attachTo and destroy specs

* refactor: continue moving to jest

* refactor: update tests

* refactor: update tests

* refactor: update tests

* refactor: continue jest migration

* refactor: continue jest migration

* refactor: remove sinon

* refactor: update tests to use jest

* refactor: update tests to use jest

* refactor: add jsx plugin and update scopedSlots spec

* chore: add missing deps

* test: add class component and update stubs tests

* test: update tests

* test: migrate more tests

* test: continue migration

* test: refactor set methods

* test: finish refactor set methods

* test: refactor trigger

* test: refactor wrapper-array specs

* test: update config.spec.js

* test: update mount specs

* test: use spyOn

* test: migrate tests

* test: placeholder to prevent false failure

* test: remove karma, sinon, chai and see what happens

* test: do not use compiled dist files for tests

* test: make scripts minimal

* test: update import paths

* chore: update circleci

* chore(yarn.lock): dedupe the yarn lock file to run jest tests

* chore(test/setup): remove the test setup directory

The test setup directory is no longer being used

* chore: remove @babel/polyfill

@babel/polyfill is no longer needed as tests in browser are no longer applicable

* chore(babel.config.js): set preset-env target to node current

Since browser tests are no longer applicable, jest is the only tool that is actively using babel.
The target can now be set to the current node environment, which in turn does not require additional
polyfills (core-js, regenerator-runtime, etc)

* test(setprops.spec.js): update newly added tests to Jest

Update recently added watcher immediate tests to use jest assertions and mock functions over mocha
chai

* fix(docs/): re include vuepress build scripts to deploy docs

* chore(package.json): remove webpack and mocha related dependencies

These dependencies are no longer used and can be removed from the package.json

* ci(unit tests): run Jest tests in single thread to prevent OOM exception

Since the circle container is only 4GB, running jest tests in parallel is problematic as the
container frequently runs out of memory. The memoryt can either be increased, or the tests can run
in a single thread

* chore(package.json): move babel dependencies to dev dependencies

Babel is now only currently used by jest or systems under test. These should now be considered
development dependencies

* improvement(test/setup): reimplement Browser Unit Tests

After converting to Jest, browser tests were removed due to capatability issues. This reimplements
the browser tests with similar techniques.

All related webpack/loaders have been updated to use the latest stable
releases

Chrome/HeadlessChrome is now being used to run these tests over the deprecated
PhantomJS

Karma and Jasmine are being used as a test runner while leveraging Jest's expect/assertion and mock/stubbing libraries

Highly inspired by https://github.com/tom-sherman/blog/blob/master/posts/02-running-jest-tests-in-a-browser.md.

1629

* chore(scripts): re add missing build scripts

Add back build scripts that were initially removed from jest migration

* chore(jsdom): remove JSDOM and JSDOM-Global

JSDOM and JSDOM-Global are no longer used with the removal of the mocha tests. JSDOM is still used
implicitly by jest.

* chore: update eslintrc

* chore(karma.config.js): set singleRun to true for all runtimes

Set singleRun option in karma to true locally and in CI so the test process always terminates when
finished

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

.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