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>
vuejs · Aug 16, 2020 · 60c1bce · 60c1bce
1 parent ea2a571
commit 60c1bce
Show file tree

Hide file tree

Showing 101 changed files with 4,263 additions and 3,659 deletions.
diff --git a/.eslintrc b/.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,

diff --git a/babel.config.js b/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
+  }
+}
diff --git a/docs/api/wrapper-array/setChecked.md b/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')
 ```
diff --git a/docs/api/wrapper-array/setValue.md b/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')
 ```
diff --git a/docs/ja/api/wrapper-array/setChecked.md b/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')
 ```
diff --git a/docs/ja/api/wrapper-array/setValue.md b/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')
 ```
diff --git a/docs/ru/api/wrapper-array/setChecked.md b/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')
 ```
diff --git a/docs/ru/api/wrapper-array/setValue.md b/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')
 ```
diff --git a/docs/zh/api/wrapper-array/setChecked.md b/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')
 ```
diff --git a/docs/zh/api/wrapper-array/setValue.md b/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')
 ```
diff --git a/jest.config.js b/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'
+  }
+}
diff --git a/package.json b/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": {

diff --git a/packages/test-utils/src/wrapper.js b/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()

diff --git a/scripts/test-compat.sh b/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

diff --git a/test/resources/utils.js b/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
 

diff --git a/test/setup/karma.conf.js b/test/setup/karma.conf.js