diff --git a/.eslintrc b/.eslintrc index a463b2c8e..dad888b1d 100644 --- 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 index 7dfb99a43..e7d78a63b 100644 --- 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 index d3dc1ff6f..e59784c89 100644 --- 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 index a584c6a3f..1a50d0f38 100644 --- 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 index ee936441a..9d2783ef8 100644 --- 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 index 2c8c5f918..80bb6ddaa 100644 --- 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 index bb5f389b7..ead59d2e6 100644 --- 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 index 53396c0dd..33d2cfb24 100644 --- 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 index d6cbfdaff..eb2a64c85 100644 --- 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 index 5d8007bbf..f6b1a2430 100644 --- 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 new file mode 100644 index 000000000..59678951b --- /dev/null +++ b/jest.config.js @@ -0,0 +1,11 @@ +module.exports = { + moduleNameMapper: { + '^~(.*)$': '/test/$1', + '^packages/(.*)$': '/packages/$1', + '\\.(css|less|scss|sass)$': 'identity-obj-proxy' + }, + transform: { + '.*\\.(vue)$': 'vue-jest', + '^.+\\.js$': '/node_modules/babel-jest' + } +} diff --git a/package.json b/package.json index 7e0e6dfd6..50f8d2b09 100644 --- a/package.json +++ b/package.json @@ -19,55 +19,24 @@ "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", @@ -75,33 +44,57 @@ "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 index f93295386..6d1e49e6c 100644 --- 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 index 165ebffd7..0bb53b15a 100755 --- 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 index 8d50b0aed..b265c94e6 100644 --- 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 deleted file mode 100644 index f540ef292..000000000 --- a/test/setup/karma.conf.js +++ /dev/null @@ -1,22 +0,0 @@ -const webpackConfig = require('./webpack.test.config.js') - -module.exports = function(config) { - config.set({ - browsers: ['PhantomJS'], - frameworks: ['mocha', 'sinon-chai'], - reporters: ['spec'], - files: [ - '../../node_modules/@babel/polyfill/dist/polyfill.js', - './polyfills.js', - 'load-tests.js' - ], - preprocessors: { - 'load-tests.js': ['webpack', 'sourcemap'] - }, - client: { mocha: { timeout: 20000 } }, - webpack: webpackConfig, - webpackMiddleware: { - noInfo: true - } - }) -} diff --git a/test/setup/karma.config.js b/test/setup/karma.config.js new file mode 100644 index 000000000..30f12e8d4 --- /dev/null +++ b/test/setup/karma.config.js @@ -0,0 +1,42 @@ +const webpackConfig = require('./webpack.test.config.js') + +if (process.env.CI) { + // For CI runs, an installation of chrome/chromium is required + // see https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer for more details + process.env.CHROME_BIN = require('puppeteer').executablePath() +} + +module.exports = config => { + config.set({ + browsers: [process.env.CI ? 'ChromeHeadlessNoSandbox' : 'Chrome'], + ...(process.env.CI + ? { + customLaunchers: { + ChromeHeadlessNoSandbox: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + } + } + : {}), + singleRun: true, + plugins: [ + 'karma-webpack', + 'karma-jasmine', + 'karma-chrome-launcher', + 'karma-spec-reporter' + ], + basePath: '../../', + reporters: ['spec'], + frameworks: ['jasmine'], + files: ['./test/setup/karma.setup.js', './test/setup/load-tests.js'], + preprocessors: { + './test/setup/karma.setup.js': ['webpack'], + './test/setup/load-tests.js': ['webpack'] + }, + webpack: webpackConfig, + webpackMiddleware: { + noInfo: true + } + }) +} diff --git a/test/setup/karma.setup.js b/test/setup/karma.setup.js new file mode 100644 index 000000000..993291bd0 --- /dev/null +++ b/test/setup/karma.setup.js @@ -0,0 +1,22 @@ +/** + * Since running in the browser, polyfill missing functionality with core-js, + * as well as include the regenerator runtime. + * Please see https://babeljs.io/docs/en/babel-polyfill and https://github.com/zloirock/core-js for more details + */ +import 'core-js' +import 'regenerator-runtime/runtime' + +import jest from 'jest-mock' +import expect from 'expect' + +// Add Jest API to the global scope / browser window +// Jasmine will be used as the test runner while leveraging Jest's expect/assertion and mock/stubbing libraries +window.test = window.it +window.test.each = inputs => (testName, test) => + inputs.forEach(args => window.it(testName, () => test(...args))) +window.test.todo = window.test.skip = () => { + return undefined +} + +window.jest = jest +window.expect = expect diff --git a/test/setup/load-tests.js b/test/setup/load-tests.js index 9563fff0e..6ad10a846 100644 --- a/test/setup/load-tests.js +++ b/test/setup/load-tests.js @@ -1,3 +1,10 @@ +/** + * require.context is used in order to build one bundle with karma-webpack. + * If globstars are used, a bundle is created per glob match. + * This creates obvious memory issues and is not desired. + * + * Please see https://github.com/webpack-contrib/karma-webpack#alternative-usage for more details + */ const testsContext = require.context('../specs', true, /\.spec\.(js|vue)$/) testsContext.keys().forEach(testsContext) diff --git a/test/setup/mocha.setup.js b/test/setup/mocha.setup.js deleted file mode 100644 index aea504407..000000000 --- a/test/setup/mocha.setup.js +++ /dev/null @@ -1,14 +0,0 @@ -require('@babel/polyfill') - -if (process.env.TEST_ENV !== 'node') { - require('jsdom-global')() -} - -const chai = require('chai') -const sinon = require('sinon') -const sinonChai = require('sinon-chai') - -chai.use(sinonChai) - -global.expect = chai.expect -global.sinon = sinon diff --git a/test/setup/polyfills.js b/test/setup/polyfills.js deleted file mode 100644 index 29552182e..000000000 --- a/test/setup/polyfills.js +++ /dev/null @@ -1,14 +0,0 @@ -if (typeof Element !== 'undefined' && !Element.prototype.matches) { - Element.prototype.matches = - Element.prototype.matchesSelector || - Element.prototype.mozMatchesSelector || - Element.prototype.msMatchesSelector || - Element.prototype.oMatchesSelector || - Element.prototype.webkitMatchesSelector || - function(s) { - var matches = (this.document || this.ownerDocument).querySelectorAll(s) - var i = matches.length - while (--i >= 0 && matches.item(i) !== this) {} - return i > -1 - } -} diff --git a/test/setup/webpack.test.config.js b/test/setup/webpack.test.config.js index a391e9e0a..ca7300e8b 100644 --- a/test/setup/webpack.test.config.js +++ b/test/setup/webpack.test.config.js @@ -2,6 +2,8 @@ const nodeExternals = require('webpack-node-externals') const webpack = require('webpack') +const VueLoaderPlugin = require('vue-loader/lib/plugin') + const browser = process.env.TARGET === 'browser' const path = require('path') @@ -10,12 +12,23 @@ const projectRoot = path.resolve(__dirname, '../../') const rules = [].concat( { test: /\.vue$/, - loader: 'vue-loader' + use: 'vue-loader' }, { test: /\.js$/, - loader: 'babel-loader', + use: 'babel-loader', exclude: /node_modules/ + }, + { + test: /\.css$/, + use: [ + { + loader: 'vue-style-loader' + }, + { + loader: 'css-loader' + } + ] } ) const externals = nodeExternals({ @@ -29,14 +42,17 @@ const externals = nodeExternals({ }) // define the default aliases let aliasedFiles = {} -if (process.env.TARGET === 'dev') { +if (process.env.TARGET === 'browser') { // 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 = { + // since NODE_ENV is used heavily in the testing suite, using `production` mode in CI will cause side effects + mode: 'development', module: { rules }, @@ -44,7 +60,8 @@ module.exports = { resolve: { alias: { ...aliasedFiles, - '~resources': `${projectRoot}/test/resources` + '~resources': `${projectRoot}/test/resources`, + packages: path.resolve(projectRoot, 'packages') } }, output: { @@ -56,5 +73,5 @@ module.exports = { fs: 'empty', module: 'empty' }, - plugins: [new webpack.EnvironmentPlugin(['TEST_ENV'])] + plugins: [new webpack.EnvironmentPlugin(['TEST_ENV']), new VueLoaderPlugin()] } diff --git a/test/specs/components/RouterLink.spec.js b/test/specs/components/RouterLink.spec.js index 47f8e4373..fcae948e8 100644 --- a/test/specs/components/RouterLink.spec.js +++ b/test/specs/components/RouterLink.spec.js @@ -1,4 +1,4 @@ -import { RouterLinkStub } from '@vue/test-utils' +import RouterLinkStub from '../.././../packages/test-utils/src/components/RouterLinkStub' import { describeWithShallowAndMount } from '~resources/utils' describeWithShallowAndMount('RouterLinkStub', mountingMethod => { @@ -26,14 +26,14 @@ describeWithShallowAndMount('RouterLinkStub', mountingMethod => { }) const routerLink = wrapper.find(RouterLinkStub) - expect(routerLink.props().to).to.equal('to1') - expect(routerLink.props().tag).to.equal('a') - expect(routerLink.props().exact).to.equal(true) - expect(routerLink.props().append).to.equal(true) - expect(routerLink.props().replace).to.equal(true) - expect(routerLink.props().activeClass).to.equal('activeClass1') - expect(routerLink.props().exactActiveClass).to.equal('exactActiveClass1') - expect(routerLink.props().event).to.equal('event1') + expect(routerLink.props().to).toEqual('to1') + expect(routerLink.props().tag).toEqual('a') + expect(routerLink.props().exact).toEqual(true) + expect(routerLink.props().append).toEqual(true) + expect(routerLink.props().replace).toEqual(true) + expect(routerLink.props().activeClass).toEqual('activeClass1') + expect(routerLink.props().exactActiveClass).toEqual('exactActiveClass1') + expect(routerLink.props().event).toEqual('event1') }) it('renders slot content', () => { @@ -49,6 +49,6 @@ describeWithShallowAndMount('RouterLinkStub', mountingMethod => { RouterLink: RouterLinkStub } }) - expect(wrapper.find(RouterLinkStub).text()).to.equal('some text') + expect(wrapper.find(RouterLinkStub).text()).toEqual('some text') }) }) diff --git a/test/specs/config.spec.js b/test/specs/config.spec.js index 4cdf3281a..4202d4150 100644 --- a/test/specs/config.spec.js +++ b/test/specs/config.spec.js @@ -1,25 +1,25 @@ 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 'packages/test-utils/src' import ComponentWithTransitions from '~resources/components/component-with-transitions.vue' describeWithShallowAndMount('config', mountingMethod => { - const sandbox = sinon.createSandbox() let configStubsSave let configSilentSave + let consoleErrorSave beforeEach(() => { configStubsSave = config.stubs configSilentSave = config.silent - sandbox.stub(console, 'error').callThrough() + consoleErrorSave = console.error + console.error = jest.fn() }) afterEach(() => { config.stubs = configStubsSave config.silent = configSilentSave config.methods = {} - sandbox.reset() - sandbox.restore() + console.error = consoleErrorSave }) it('mocks a global variable', () => { @@ -40,8 +40,8 @@ describeWithShallowAndMount('config', mountingMethod => { t }) - expect(wrapper.vm.$t).to.equal('mock value') - expect(wrapper.text()).to.equal('mock value') + expect(wrapper.vm.$t).toEqual('mock value') + expect(wrapper.text()).toEqual('mock value') localVue.prototype.$t = undefined }) @@ -57,8 +57,8 @@ describeWithShallowAndMount('config', mountingMethod => { const wrapper = mountingMethod(testComponent) - expect(wrapper.vm.val()).to.equal('method') - expect(wrapper.text()).to.equal('method') + expect(wrapper.vm.val()).toEqual('method') + expect(wrapper.text()).toEqual('method') }) it("doesn't throw Vue warning when silent is set to true", () => { @@ -70,11 +70,11 @@ describeWithShallowAndMount('config', mountingMethod => { }, localVue }) - expect(wrapper.vm.prop1).to.equal('example') + expect(wrapper.vm.prop1).toEqual('example') wrapper.setProps({ prop1: 'new value' }) - expect(console.error).not.calledWith(sandbox.match('[Vue warn]')) + expect(console.error).not.toHaveBeenCalled() }) it('does throw Vue warning when silent is set to false', () => { @@ -86,19 +86,21 @@ describeWithShallowAndMount('config', mountingMethod => { }, localVue }) - expect(wrapper.vm.prop1).to.equal('example') + expect(wrapper.vm.prop1).toEqual('example') wrapper.setProps({ prop1: 'new value' }) - expect(console.error).calledWith(sandbox.match('[Vue warn]')) + expect(console.error).toHaveBeenCalledWith( + expect.stringMatching(/[Vue warn]/) + ) }) it('stubs out transitions by default', async () => { const wrapper = mountingMethod(ComponentWithTransitions) - expect(wrapper.find('[data-testid="expanded"]').exists()).to.equal(true) + expect(wrapper.find('[data-testid="expanded"]').exists()).toEqual(true) wrapper.setData({ expanded: true }) await wrapper.vm.$nextTick() - expect(wrapper.find('[data-testid="expanded"]').exists()).to.equal(false) + expect(wrapper.find('[data-testid="expanded"]').exists()).toEqual(false) }) it('allows control deprecation warnings visibility for name method', () => { @@ -109,10 +111,12 @@ describeWithShallowAndMount('config', mountingMethod => { } const wrapper = mountingMethod(Component) wrapper.name() - expect(console.error).to.be.calledWith(sandbox.match('name is deprecated')) + expect(console.error).toHaveBeenCalledWith( + expect.stringMatching(/name is deprecated/) + ) config.showDeprecationWarnings = false wrapper.name() - expect(console.error).to.have.callCount(1) + expect(console.error).toHaveBeenCalledTimes(1) }) describe('attachToDocument deprecation warning', () => { @@ -127,8 +131,9 @@ describeWithShallowAndMount('config', mountingMethod => { mountingMethod(Component, { attachToDocument: true }) - expect(console.error).to.be.calledWith( - sandbox.match('attachToDocument is deprecated') + + expect(console.error).toHaveBeenCalledWith( + expect.stringMatching(/attachToDocument is deprecated/) ) }) @@ -139,8 +144,8 @@ describeWithShallowAndMount('config', mountingMethod => { attachToDocument: true }) - expect(console.error).not.to.be.calledWith( - sandbox.match('attachToDocument is deprecated') + expect(console.error).not.toHaveBeenCalledWith( + expect.stringMatching(/attachToDocument is deprecated/) ) }) }) @@ -161,8 +166,8 @@ describeWithShallowAndMount('config', mountingMethod => { methods: { foo: () => {} } }) - expect(console.error).to.be.calledWith( - sandbox.match(expectedErrorMessage) + expect(console.error).toHaveBeenCalledWith( + expect.stringMatching(expectedErrorMessage) ) }) @@ -173,8 +178,8 @@ describeWithShallowAndMount('config', mountingMethod => { methods: { foo: () => {} } }) - expect(console.error).not.to.be.calledWith( - sandbox.match(expectedErrorMessage) + expect(console.error).not.toHaveBeenCalledWith( + expect.stringMatching(expectedErrorMessage) ) }) @@ -183,8 +188,8 @@ describeWithShallowAndMount('config', mountingMethod => { mountingMethod(Component).setMethods({ foo: () => {} }) - expect(console.error).to.be.calledWith( - sandbox.match(expectedErrorMessage) + expect(console.error).toHaveBeenCalledWith( + expect.stringMatching(expectedErrorMessage) ) }) @@ -193,8 +198,8 @@ describeWithShallowAndMount('config', mountingMethod => { mountingMethod(Component).setMethods({ foo: () => {} }) - expect(console.error).not.to.be.calledWith( - sandbox.match(expectedErrorMessage) + expect(console.error).not.toHaveBeenCalledWith( + expect.stringMatching(expectedErrorMessage) ) }) }) diff --git a/test/specs/create-dom-event.spec.js b/test/specs/create-dom-event.spec.js index 263620425..5472281ee 100644 --- a/test/specs/create-dom-event.spec.js +++ b/test/specs/create-dom-event.spec.js @@ -1,11 +1,11 @@ import createDOMEvent from '../../packages/test-utils/src/create-dom-event' -import { isRunningPhantomJS } from '~resources/utils' +import { isRunningChrome } from '~resources/utils' import { itDoNotRunIf } from 'conditional-specs' describe('createDOMEvent', () => { - itDoNotRunIf(isRunningPhantomJS, 'returns cancelable event', () => { + itDoNotRunIf(isRunningChrome, 'returns cancelable event', () => { const event = createDOMEvent('click', {}) - expect(event.bubbles).to.equal(true) - expect(event.cancelable).to.equal(true) + expect(event.bubbles).toEqual(true) + expect(event.cancelable).toEqual(true) }) }) diff --git a/test/specs/create-local-vue.spec.js b/test/specs/create-local-vue.spec.js index 45c82d4f5..09a928a01 100644 --- a/test/specs/create-local-vue.spec.js +++ b/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 'packages/test-utils/src' 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' @@ -21,9 +21,9 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { } }) const wrapper = mountingMethod(Component, { localVue, store }) - expect(wrapper.vm.$store).to.be.an('object') + expect(wrapper.vm.$store).toBeTruthy() const freshWrapper = mountingMethod(Component) - expect(typeof freshWrapper.vm.$store).to.equal('undefined') + expect(typeof freshWrapper.vm.$store).toEqual('undefined') }) it('Vuex should work properly with local Vue', async () => { @@ -45,11 +45,11 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { } }) const wrapper = mountingMethod(ComponentWithVuex, { localVue, store }) - expect(wrapper.vm.$store).to.be.an('object') - expect(wrapper.text()).to.equal('0 1') + expect(wrapper.vm.$store).toBeTruthy() + expect(wrapper.text()).toEqual('0 1') wrapper.trigger('click') await Vue.nextTick() - expect(wrapper.text()).to.equal('1 1') + expect(wrapper.text()).toEqual('1 1') }) it('installs Router without polluting global Vue', () => { @@ -60,9 +60,9 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { routes }) const wrapper = mountingMethod(Component, { localVue, router }) - expect(wrapper.vm.$route).to.be.an('object') + expect(wrapper.vm.$route).toBeTruthy() const freshWrapper = mountingMethod(Component) - expect(typeof freshWrapper.vm.$route).to.equal('undefined') + expect(typeof freshWrapper.vm.$route).toEqual('undefined') }) itDoNotRunIf( @@ -89,15 +89,15 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { routes }) const wrapper = mountingMethod(ComponentWithRouter, { localVue, router }) - expect(wrapper.vm.$route).to.be.an('object') + expect(wrapper.vm.$route).toBeTruthy() - expect(wrapper.text()).to.contain('home') + expect(wrapper.text()).toContain('home') wrapper.find('a').trigger('click') - expect(wrapper.text()).to.contain('foo') + expect(wrapper.text()).toContain('foo') const freshWrapper = mountingMethod(Component) - expect(typeof freshWrapper.vm.$route).to.equal('undefined') + expect(typeof freshWrapper.vm.$route).toEqual('undefined') } ) @@ -106,7 +106,7 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { const pluginOptions = { foo: 'bar' } const plugin = { install: function(_Vue, options) { - expect(options).to.equal(pluginOptions) + expect(options).toEqual(pluginOptions) } } localVue.use(plugin, pluginOptions) @@ -118,7 +118,7 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { class Plugin {} Plugin.install = function(_Vue) { if (_Vue._installedPlugins) { - expect(_Vue._installedPlugins.indexOf(Plugin)).to.equal(-1) + expect(_Vue._installedPlugins.indexOf(Plugin)).toEqual(-1) } installCount++ } @@ -128,8 +128,8 @@ describeWithShallowAndMount('createLocalVue', mountingMethod => { localVue.use(Plugin) if (localVue._installedPlugins) { - expect(localVue._installedPlugins.indexOf(Plugin)).to.equal(0) + expect(localVue._installedPlugins.indexOf(Plugin)).toEqual(0) } - expect(installCount).to.equal(2) + expect(installCount).toEqual(2) }) }) diff --git a/test/specs/create-wrapper.spec.js b/test/specs/create-wrapper.spec.js index b2f1e35ae..7ad4df56f 100644 --- a/test/specs/create-wrapper.spec.js +++ b/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 'packages/test-utils/src' import Component from '~resources/components/component.vue' import { describeRunIf } from 'conditional-specs' @@ -8,14 +8,14 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const Constructor = Vue.extend(Component) const vm = new Constructor().$mount() const wrapper = createWrapper(vm) - expect(wrapper.is(Component)).to.equal(true) - expect(wrapper).instanceof(Wrapper) - expect(wrapper.findAll('div')).instanceof(WrapperArray) + expect(wrapper.is(Component)).toEqual(true) + expect(wrapper).toBeInstanceOf(Wrapper) + expect(wrapper.findAll('div')).toBeInstanceOf(WrapperArray) }) it('handles HTMLElement', () => { const wrapper = createWrapper(document.createElement('div')) - expect(wrapper.is('div')).to.equal(true) + expect(wrapper.is('div')).toEqual(true) }) it('handles options', () => { @@ -24,6 +24,6 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const wrapper = createWrapper(vm, { attachToDocument: true }) - expect(wrapper.options.attachToDocument).to.equal(true) + expect(wrapper.options.attachToDocument).toEqual(true) }) }) diff --git a/test/specs/error-wrapper.spec.js b/test/specs/error-wrapper.spec.js index 3357194c9..3ef624864 100644 --- a/test/specs/error-wrapper.spec.js +++ b/test/specs/error-wrapper.spec.js @@ -43,10 +43,8 @@ describeWithShallowAndMount('ErrorWrapper', mountingMethod => { const message = `[vue-test-utils]: find did not return ${selector}, cannot call ${method}() on empty Wrapper` const wrapper = mountingMethod(TestComponent) const error = wrapper.find(selector) - expect(error.constructor.name).to.equal('ErrorWrapper') - expect(() => error[method]()) - .to.throw() - .with.property('message', message) + expect(error.constructor.name).toEqual('ErrorWrapper') + expect(() => error[method]()).toThrow(message) }) }) }) diff --git a/test/specs/external-libraries.spec.js b/test/specs/external-libraries.spec.js index 4b4d2a92b..151d8779f 100644 --- a/test/specs/external-libraries.spec.js +++ b/test/specs/external-libraries.spec.js @@ -1,4 +1,4 @@ -import { createLocalVue, mount } from '@vue/test-utils' +import { createLocalVue, mount } from 'packages/test-utils/src' import VeeValidate from 'vee-validate' import { describeWithShallowAndMount } from '~resources/utils' diff --git a/test/specs/mount.spec.js b/test/specs/mount.spec.js index b7b0dc738..e5f3b7873 100644 --- a/test/specs/mount.spec.js +++ b/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 'packages/test-utils/src' import CompositionAPI, { createElement } from '@vue/composition-api' import Component from '~resources/components/component.vue' import ComponentWithProps from '~resources/components/component-with-props.vue' @@ -11,23 +11,18 @@ import { describeRunIf, itDoNotRunIf, itSkipIf } from 'conditional-specs' import Vuex from 'vuex' describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { - const sandbox = sinon.createSandbox() const windowSave = window - beforeEach(() => { - sandbox.stub(console, 'error').callThrough() - }) - afterEach(() => { - window = windowSave // eslint-disable-line no-native-reassign - sandbox.reset() - sandbox.restore() + if (process.env.TEST_ENV !== 'browser') { + window = windowSave // eslint-disable-line no-native-reassign + } }) it('returns new VueWrapper with mounted Vue instance if no options are passed', () => { const compiled = compileToFunctions('
') const wrapper = mount(compiled) - expect(wrapper.vm).to.be.an('object') + expect(wrapper.vm).toBeTruthy() }) it('handles root functional component', () => { @@ -39,17 +34,17 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } const wrapper = mount(TestComponent) - expect(wrapper.findAll('p').length).to.equal(2) + expect(wrapper.findAll('p').length).toEqual(2) }) it('returns new VueWrapper with correct props data', () => { const prop1 = { test: 'TEST' } const wrapper = mount(ComponentWithProps, { propsData: { prop1 } }) - expect(wrapper.vm).to.be.an('object') + expect(wrapper.vm).toBeTruthy() if (wrapper.vm.$props) { - expect(wrapper.vm.$props.prop1).to.equal(prop1) + expect(wrapper.vm.$props.prop1).toEqual(prop1) } else { - expect(wrapper.vm.$options.propsData.prop1).to.equal(prop1) + expect(wrapper.vm.$options.propsData.prop1).toEqual(prop1) } }) @@ -64,7 +59,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { prop1 } }) - expect(wrapper.text()).to.contain(prop1) + expect(wrapper.text()).toContain(prop1) } ) @@ -76,7 +71,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { extends: BaseComponent } const wrapper = mount(TestComponent) - expect(wrapper.findAll('div').length).to.equal(1) + expect(wrapper.findAll('div').length).toEqual(1) }) it('handles nested uncompiled extended Vue component', () => { @@ -96,7 +91,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { extends: TestComponentC } const wrapper = mount(TestComponentD) - expect(wrapper.findAll('div').length).to.equal(1) + expect(wrapper.findAll('div').length).toEqual(1) }) itSkipIf( @@ -123,19 +118,18 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } catch (err) { } finally { delete Vue.options.components['child-component'] - expect(wrapper.find(ChildComponent).exists()).to.equal(true) + expect(wrapper.find(ChildComponent).exists()).toEqual(true) } } ) it('does not use cached component', () => { - sandbox.stub(ComponentWithMixin.methods, 'someMethod') + ComponentWithMixin.methods.someMethod = jest.fn() mount(ComponentWithMixin) - expect(ComponentWithMixin.methods.someMethod.callCount).to.equal(1) - ComponentWithMixin.methods.someMethod.restore() - sandbox.stub(ComponentWithMixin.methods, 'someMethod') + expect(ComponentWithMixin.methods.someMethod).toHaveBeenCalledTimes(1) + ComponentWithMixin.methods.someMethod = jest.fn() mount(ComponentWithMixin) - expect(ComponentWithMixin.methods.someMethod.callCount).to.equal(1) + expect(ComponentWithMixin.methods.someMethod).toHaveBeenCalledTimes(1) }) it('throws an error if window is undefined', () => { @@ -149,17 +143,15 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { '[vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment.\n You can run the tests in node using JSDOM' window = undefined // eslint-disable-line no-native-reassign - expect(() => mount(compileToFunctions('
'))) - .to.throw() - .with.property('message', message) + expect(() => mount(compileToFunctions('
'))).toThrow(message) }) it('compiles inline templates', () => { const wrapper = mount({ template: `
foo
` }) - expect(wrapper.vm).to.be.an('object') - expect(wrapper.html()).to.equal(`
foo
`) + expect(wrapper.vm).toBeTruthy() + expect(wrapper.html()).toEqual(`
foo
`) }) itDoNotRunIf( @@ -174,15 +166,15 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const wrapper = mount({ template: '#foo' }) - expect(wrapper.vm).to.be.an('object') - expect(wrapper.html()).to.equal(`
foo
`) + expect(wrapper.vm).toBeTruthy() + expect(wrapper.html()).toEqual(`
foo
`) window.body.removeChild(template) } ) itDoNotRunIf(vueVersion < 2.3, 'overrides methods', () => { - const stub = sandbox.stub() + const stub = jest.fn() const TestComponent = Vue.extend({ template: '
', methods: { @@ -197,32 +189,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } }).vm.callStub() - expect(stub).not.called - }) - - it.skip('overrides component prototype', () => { - const mountSpy = sandbox.spy() - const destroySpy = sandbox.spy() - const Component = Vue.extend({}) - const { - $mount: originalMount, - $destroy: originalDestroy - } = Component.prototype - Component.prototype.$mount = function(...args) { - originalMount.apply(this, args) - mountSpy() - return this - } - Component.prototype.$destroy = function() { - originalDestroy.apply(this) - destroySpy() - } - - const wrapper = mount(Component) - expect(mountSpy).called - expect(destroySpy).not.called - wrapper.destroy() - expect(destroySpy).called + expect(stub).not.toHaveBeenCalled() }) // Problems accessing options of twice extended components in Vue < 2.3 @@ -231,7 +198,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { template: '
' }) const wrapper = mount(TestComponent) - expect(wrapper.html()).to.equal(`
`) + expect(wrapper.html()).toEqual(`
`) }) itDoNotRunIf( @@ -246,7 +213,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } const wrapper = mount(TestComponent) setTimeout(() => { - expect(wrapper.find(Component).exists()).to.equal(true) + expect(wrapper.find(Component).exists()).toEqual(true) done() }) } @@ -281,19 +248,19 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } ) if (injectSupported) { - expect(typeof wrapper.vm.$options.provide).to.equal( + expect(typeof wrapper.vm.$options.provide).toEqual( vueVersion < 2.5 ? 'function' : 'object' ) } - expect(wrapper.vm.$options.attachToDocument).to.equal(undefined) - expect(wrapper.vm.$options.mocks).to.equal(undefined) - expect(wrapper.vm.$options.slots).to.equal(undefined) - expect(wrapper.vm.$options.localVue).to.equal(undefined) - expect(wrapper.vm.$options.stubs).to.equal(undefined) - expect(wrapper.vm.$options.context).to.equal(undefined) - expect(wrapper.vm.$options.attrs).to.equal(undefined) - expect(wrapper.vm.$options.listeners).to.equal(undefined) + expect(wrapper.vm.$options.attachToDocument).toEqual(undefined) + expect(wrapper.vm.$options.mocks).toEqual(undefined) + expect(wrapper.vm.$options.slots).toEqual(undefined) + expect(wrapper.vm.$options.localVue).toEqual(undefined) + expect(wrapper.vm.$options.stubs).toEqual(undefined) + expect(wrapper.vm.$options.context).toEqual(undefined) + expect(wrapper.vm.$options.attrs).toEqual(undefined) + expect(wrapper.vm.$options.listeners).toEqual(undefined) wrapper.destroy() }) @@ -323,7 +290,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } const fn = () => mount(TestComponent) - expect(fn).to.throw('Error in mounted') + expect(fn).toThrow('Error in mounted') }) it('propagates errors when they are thrown by a nested component', () => { @@ -343,7 +310,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { mount(rootComponent) } - expect(fn).to.throw('Error in mounted') + expect(fn).toThrow('Error in mounted') }) it('adds unused propsData as attributes', () => { @@ -359,10 +326,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { }) if (vueVersion > 2.3) { - expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' }) + expect(wrapper.vm.$attrs).toEqual({ height: '50px', extra: 'attr' }) } - expect(wrapper.html()).to.equal( + expect(wrapper.html()).toEqual( '
\n' + '

prop1

\n' + '

\n' + @@ -394,7 +361,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } } const wrapper = mount(Component, options) - expect(wrapper.text()).to.equal('aBC') + expect(wrapper.text()).toEqual('aBC') }) it('handles inline components', () => { @@ -411,7 +378,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const wrapper = mount(TestComponent, { localVue }) - expect(wrapper.findAll(ChildComponent).length).to.equal(1) + expect(wrapper.findAll(ChildComponent).length).toEqual(1) }) it('handles nested components with extends', () => { @@ -449,7 +416,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { } } const wrapper = mount(Comp, { localVue }) - expect(wrapper.html()).to.equal('
composition api
') + expect(wrapper.html()).toEqual('
composition api
') }) itDoNotRunIf.skip( @@ -469,7 +436,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const fn = () => { wrapper.vm.a = 2 } - expect(fn).to.throw() + expect(fn).toThrow() wrapper.destroy() } ) diff --git a/test/specs/mounting-options/attachTo.spec.js b/test/specs/mounting-options/attachTo.spec.js index ff519812a..65852724c 100644 --- a/test/specs/mounting-options/attachTo.spec.js +++ b/test/specs/mounting-options/attachTo.spec.js @@ -9,69 +9,69 @@ const TestComponent = { template } describeWithShallowAndMount('options.attachTo', mountingMethod => { it('should not mount to document when null', () => { const wrapper = mountingMethod(TestComponent, {}) - expect(wrapper.vm.$el.parentNode).to.be.null + expect(wrapper.vm.$el.parentNode).toBeNull() wrapper.destroy() }) it('attaches to a provided HTMLElement', () => { const div = document.createElement('div') div.id = 'root' document.body.appendChild(div) - expect(document.getElementById('root')).to.not.be.null - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('root')).not.toBeNull() + expect(document.getElementById('attach-to')).toBeNull() const wrapper = mountingMethod(TestComponent, { attachTo: div }) const root = document.getElementById('root') const rendered = document.getElementById('attach-to') - expect(wrapper.vm.$el.parentNode).to.not.be.null - expect(root).to.be.null - expect(rendered).to.not.be.null - expect(rendered.outerHTML).to.equal(outerHTML) - expect(wrapper.options.attachedToDocument).to.equal(true) + expect(wrapper.vm.$el.parentNode).not.toBeNull() + expect(root).toBeNull() + expect(rendered).not.toBeNull() + expect(rendered.outerHTML).toEqual(outerHTML) + expect(wrapper.options.attachedToDocument).toEqual(true) wrapper.destroy() - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('attach-to')).toBeNull() }) it('attaches to a provided CSS selector string', () => { const div = document.createElement('div') div.id = 'root' document.body.appendChild(div) - expect(document.getElementById('root')).to.not.be.null - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('root')).not.toBeNull() + expect(document.getElementById('attach-to')).toBeNull() const wrapper = mountingMethod(TestComponent, { attachTo: '#root' }) const root = document.getElementById('root') const rendered = document.getElementById('attach-to') - expect(wrapper.vm.$el.parentNode).to.not.be.null - expect(root).to.be.null - expect(rendered).to.not.be.null - expect(rendered.outerHTML).to.equal(outerHTML) - expect(wrapper.options.attachedToDocument).to.equal(true) + expect(wrapper.vm.$el.parentNode).not.toBeNull() + expect(root).toBeNull() + expect(rendered).not.toBeNull() + expect(rendered.outerHTML).toEqual(outerHTML) + expect(wrapper.options.attachedToDocument).toEqual(true) wrapper.destroy() - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('attach-to')).toBeNull() }) it('correctly hydrates markup', () => { - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('attach-to')).toBeNull() const div = document.createElement('div') div.id = 'attach-to' div.setAttribute('data-server-rendered', 'true') div.innerHTML = innerHTML document.body.appendChild(div) - expect(div.outerHTML).to.equal(ssrHTML) + expect(div.outerHTML).toEqual(ssrHTML) const wrapper = mountingMethod(TestComponent, { attachTo: '#attach-to' }) const rendered = document.getElementById('attach-to') - expect(wrapper.vm.$el.parentNode).to.not.be.null - expect(rendered).to.not.be.null - expect(rendered.outerHTML).to.equal(outerHTML) - expect(wrapper.options.attachedToDocument).to.equal(true) + expect(wrapper.vm.$el.parentNode).not.toBeNull() + expect(rendered).not.toBeNull() + expect(rendered.outerHTML).toEqual(outerHTML) + expect(wrapper.options.attachedToDocument).toEqual(true) wrapper.destroy() - expect(document.getElementById('attach-to')).to.be.null + expect(document.getElementById('attach-to')).toBeNull() }) }) diff --git a/test/specs/mounting-options/attachToDocument.spec.js b/test/specs/mounting-options/attachToDocument.spec.js index 97083e0cf..b0c026614 100644 --- a/test/specs/mounting-options/attachToDocument.spec.js +++ b/test/specs/mounting-options/attachToDocument.spec.js @@ -1,5 +1,5 @@ import { describeWithShallowAndMount, isRunningJSDOM } from '~resources/utils' -import { renderToString } from '@vue/server-test-utils' +import { renderToString } from 'packages/server-test-utils/src' describeWithShallowAndMount('options.attachToDocument', mountingMethod => { it('attaches root node to document', () => { @@ -9,8 +9,8 @@ describeWithShallowAndMount('options.attachToDocument', mountingMethod => { const wrapper = mountingMethod(TestComponent, { attachToDocument: true }) - expect(document.querySelector('.attached')).to.not.equal(null) - expect(wrapper.options.attachedToDocument).to.equal(true) + expect(document.querySelector('.attached')).not.toEqual(null) + expect(wrapper.options.attachedToDocument).toEqual(true) }) }) @@ -26,8 +26,6 @@ describe('options.attachToDocument with renderToString', () => { const fn = () => renderToString(TestComponent, { attachToDocument: true }) const message = '[vue-test-utils]: you cannot use attachToDocument with renderToString' - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow({ message }) }) }) diff --git a/test/specs/mounting-options/attrs.spec.js b/test/specs/mounting-options/attrs.spec.js index c0282f82a..9a09095a6 100644 --- a/test/specs/mounting-options/attrs.spec.js +++ b/test/specs/mounting-options/attrs.spec.js @@ -1,14 +1,14 @@ import { attrsSupported } from '~resources/utils' import { describeWithShallowAndMount, - isRunningPhantomJS, + isRunningChrome, vueVersion } from '~resources/utils' import { itSkipIf, itDoNotRunIf } from 'conditional-specs' describeWithShallowAndMount('options.attrs', mountingMethod => { itDoNotRunIf( - vueVersion < 2.4 || isRunningPhantomJS, + vueVersion < 2.4 || isRunningChrome, 'handles inherit attrs', () => { if (!attrsSupported) return @@ -20,8 +20,8 @@ describeWithShallowAndMount('options.attrs', mountingMethod => { anAttr: 'an attribute' } }) - expect(wrapper.vm.$attrs.anAttr).to.equal('an attribute') - expect(wrapper.vm.$attrs.anAttr).to.equal('an attribute') + expect(wrapper.vm.$attrs.anAttr).toEqual('an attribute') + expect(wrapper.vm.$attrs.anAttr).toEqual('an attribute') } ) @@ -30,7 +30,7 @@ describeWithShallowAndMount('options.attrs', mountingMethod => { 'defines attrs as empty object even when not passed', () => { const wrapper = mountingMethod({ template: '

' }) - expect(wrapper.vm.$attrs).to.deep.equal({}) + expect(wrapper.vm.$attrs).toEqual({}) } ) }) diff --git a/test/specs/mounting-options/context.spec.js b/test/specs/mounting-options/context.spec.js index 0c2a506ae..f0eaa6840 100644 --- a/test/specs/mounting-options/context.spec.js +++ b/test/specs/mounting-options/context.spec.js @@ -32,9 +32,7 @@ describeWithShallowAndMount('options.context', mountingMethod => { const message = '[vue-test-utils]: mount.context can only be used when mounting a functional component' const fn = () => mountingMethod(Component, { context }) - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) }) it('does not throw error if functional component with Vue.extend', () => { @@ -45,7 +43,7 @@ describeWithShallowAndMount('options.context', mountingMethod => { const context = {} const fn = () => mountingMethod(Component, { context, stubs: false, mocks: false }) - expect(fn).not.to.throw() + expect(fn).not.toThrow() }) it('throws error if context option is not an object', () => { @@ -56,9 +54,7 @@ describeWithShallowAndMount('options.context', mountingMethod => { const context = 'string' const message = '[vue-test-utils]: mount.context must be an object' const fn = () => mountingMethod(Component, { context }) - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) }) it('mounts functional component with a defined context when no context object passed in options', () => { @@ -74,7 +70,7 @@ describeWithShallowAndMount('options.context', mountingMethod => { render: (h, { props }) => h('div', props.testProp) } const wrapper = mountingMethod(Component) - expect(wrapper.html()).to.contain(defaultValue) + expect(wrapper.html()).toContain(defaultValue) }) it('mounts functional component with a defined context.children text', () => { @@ -89,7 +85,7 @@ describeWithShallowAndMount('options.context', mountingMethod => { children: ['render text'] } }) - expect(wrapper.html()).to.contain('render text') + expect(wrapper.html()).toContain('render text') }) it('mounts functional component with a defined context.children element', () => { @@ -104,6 +100,6 @@ describeWithShallowAndMount('options.context', mountingMethod => { children: [h => h('div', 'render component')] } }) - expect(wrapper.html()).to.contain('render component') + expect(wrapper.html()).toContain('render component') }) }) diff --git a/test/specs/mounting-options/listeners.spec.js b/test/specs/mounting-options/listeners.spec.js index d9aabc859..8f3345a50 100644 --- a/test/specs/mounting-options/listeners.spec.js +++ b/test/specs/mounting-options/listeners.spec.js @@ -1,14 +1,16 @@ import { listenersSupported } from '~resources/utils' import { describeWithShallowAndMount, - isRunningPhantomJS, + isRunningChrome, vueVersion } from '~resources/utils' import { itDoNotRunIf } from 'conditional-specs' describeWithShallowAndMount('options.listeners', mountingMethod => { + it.skip('placeholder for potentially empty test describe', () => {}) + itDoNotRunIf( - isRunningPhantomJS || !listenersSupported, + isRunningChrome || !listenersSupported, 'handles inherit listeners', () => { const aListener = () => {} @@ -23,12 +25,12 @@ describeWithShallowAndMount('options.listeners', mountingMethod => { } ) - expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener) + expect(wrapper.vm.$listeners.aListener.fns).toEqual(aListener) } ) itDoNotRunIf( - isRunningPhantomJS || !listenersSupported, + isRunningChrome || !listenersSupported, 'passes listeners to functional components', () => { const TestComponent = { @@ -58,7 +60,7 @@ describeWithShallowAndMount('options.listeners', mountingMethod => { 'defines listeners as empty object even when not passed', () => { const wrapper = mountingMethod({ template: '

' }) - expect(wrapper.vm.$listeners).to.deep.equal({}) + expect(wrapper.vm.$listeners).toEqual({}) } ) }) diff --git a/test/specs/mounting-options/localVue.spec.js b/test/specs/mounting-options/localVue.spec.js index 2ebd112b0..bc9ae0f8d 100644 --- a/test/specs/mounting-options/localVue.spec.js +++ b/test/specs/mounting-options/localVue.spec.js @@ -1,16 +1,16 @@ import Vue from 'vue' import { describeWithShallowAndMount, - isRunningPhantomJS, + isRunningChrome, vueVersion } from '~resources/utils' -import { createLocalVue, shallowMount, mount } from '@vue/test-utils' +import { createLocalVue, shallowMount, mount } from 'packages/test-utils/src' import { itSkipIf, itRunIf, itDoNotRunIf } from 'conditional-specs' import Vuex from 'vuex' describeWithShallowAndMount('options.localVue', mountingMethod => { itSkipIf( - isRunningPhantomJS, + isRunningChrome, 'mounts component using passed localVue as base Vue', () => { const TestComponent = { @@ -21,7 +21,7 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { const wrapper = mountingMethod(TestComponent, { localVue: localVue }) - expect(wrapper.html()).to.contain('some value') + expect(wrapper.html()).toContain('some value') } ) @@ -52,9 +52,9 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { const HTML = mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() if (mountingMethod.name === 'shallowMount') { - expect(HTML).to.not.contain('2') + expect(HTML).not.toContain('2') } else { - expect(HTML).to.contain('2') + expect(HTML).toContain('2') } }) @@ -137,7 +137,7 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { localVue } ) - expect(localVue.options.created).to.equal(undefined) + expect(localVue.options.created).toEqual(undefined) }) it('handles merging Vue instances', () => { @@ -171,9 +171,7 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { stubs: false, mocks: false }) - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) } ) @@ -197,7 +195,7 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { if (mountingMethod.name === 'renderToString') { return } - expect(wrapper.findAll(ChildComponent).length).to.equal(1) + expect(wrapper.findAll(ChildComponent).length).toEqual(1) } ) @@ -216,7 +214,7 @@ describeWithShallowAndMount('options.localVue', mountingMethod => { localVue.use(Vuex) shallowMount(TestComponent, { localVue }) const wrapper = mount(TestComponent, { localVue }) - expect(wrapper.html()).to.contain('span') + expect(wrapper.html()).toContain('span') } ) }) diff --git a/test/specs/mounting-options/methods.spec.js b/test/specs/mounting-options/methods.spec.js index 3e000361b..484777650 100644 --- a/test/specs/mounting-options/methods.spec.js +++ b/test/specs/mounting-options/methods.spec.js @@ -1,4 +1,4 @@ -import { config } from '@vue/test-utils' +import { config } from 'packages/test-utils/src' import { describeWithShallowAndMount } from '~resources/utils' describeWithShallowAndMount('options.methods', mountingMethod => { @@ -28,6 +28,6 @@ describeWithShallowAndMount('options.methods', mountingMethod => { } }) - expect(wrapper.html()).to.contain('methodFromOptions') + expect(wrapper.html()).toContain('methodFromOptions') }) }) diff --git a/test/specs/mounting-options/mocks.spec.js b/test/specs/mounting-options/mocks.spec.js index d6b86db2e..6f1d96d4c 100644 --- a/test/specs/mounting-options/mocks.spec.js +++ b/test/specs/mounting-options/mocks.spec.js @@ -1,4 +1,4 @@ -import { createLocalVue, config } from '@vue/test-utils' +import { createLocalVue, config } from 'packages/test-utils/src' import Vue from 'vue' import Component from '~resources/components/component.vue' import ComponentWithVuex from '~resources/components/component-with-vuex.vue' @@ -6,19 +6,15 @@ import { describeWithShallowAndMount, vueVersion } from '~resources/utils' import { itDoNotRunIf, itSkipIf, itRunIf } from 'conditional-specs' describeWithShallowAndMount('options.mocks', mountingMethod => { - const sandbox = sinon.createSandbox() - let configMocksSave + let originalConsoleError beforeEach(() => { - configMocksSave = config.mocks - config.mocks = {} - sandbox.stub(console, 'error').callThrough() + originalConsoleError = console.error + console.error = jest.fn() }) afterEach(() => { - config.mocks = configMocksSave - sandbox.reset() - sandbox.restore() + console.error = originalConsoleError }) it('adds variables to vm when passed', () => { @@ -38,8 +34,8 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { $route } }) - expect(wrapper.html()).contains('true') - expect(wrapper.html()).contains('http://test.com') + expect(wrapper.html()).toContain('true') + expect(wrapper.html()).toContain('http://test.com') }) itSkipIf(vueVersion < 2.3, 'adds variables to extended components', () => { @@ -59,11 +55,10 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { $route } }) - expect(wrapper.html()).contains('http://test.com') + expect(wrapper.html()).toContain('http://test.com') }) it('adds variables as reactive properties to vm when passed', async () => { - const stub = sandbox.stub() const $reactiveMock = { value: 'value' } const wrapper = mountingMethod( { @@ -72,21 +67,16 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { value() { return this.$reactiveMock.value } - }, - watch: { - value() { - stub() - } } }, { mocks: { $reactiveMock } } ) - expect(wrapper.text()).to.contain('value') + expect(wrapper.text()).toContain('value') $reactiveMock.value = 'changed value' await Vue.nextTick() - expect(wrapper.text()).to.contain('changed value') + expect(wrapper.text()).toContain('changed value') }) itDoNotRunIf( @@ -105,7 +95,7 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { mocks: { $store: { state: { count, foo: {} } } } } ) - expect(wrapper.html()).contains(count) + expect(wrapper.html()).toContain(count) } ) @@ -127,7 +117,7 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { localVue } ) - expect(wrapper.html()).contains(count) + expect(wrapper.html()).toContain(count) } ) @@ -138,9 +128,9 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { $store } }) - expect(wrapper.vm.$store).to.equal($store) + expect(wrapper.vm.$store).toEqual($store) const freshWrapper = mountingMethod(Component) - expect(typeof freshWrapper.vm.$store).to.equal('undefined') + expect(typeof freshWrapper.vm.$store).toEqual('undefined') }) it('logs that a property cannot be overwritten if there are problems writing', () => { @@ -159,7 +149,7 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { `[vue-test-utils]: could not overwrite property $store, this ` + `is usually caused by a plugin that has added the property as ` + `a read-only value` - expect(console.error).calledWith(msg) + expect(console.error).toHaveBeenCalledWith(msg) }) it('prioritize mounting options over config', () => { @@ -176,7 +166,7 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { $global: 'locallyMockedValue' } }) - expect(wrapper.html()).to.contain('locallyMockedValue') + expect(wrapper.html()).toContain('locallyMockedValue') }) itRunIf( @@ -195,9 +185,7 @@ describeWithShallowAndMount('options.mocks', mountingMethod => { mocks: { something: 'true' }, stubs: false }) - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) } ) }) diff --git a/test/specs/mounting-options/parentComponent.spec.js b/test/specs/mounting-options/parentComponent.spec.js index 5ce65f3dc..4d23b858d 100644 --- a/test/specs/mounting-options/parentComponent.spec.js +++ b/test/specs/mounting-options/parentComponent.spec.js @@ -13,7 +13,7 @@ describeWithShallowAndMount('options.parentComponent', mountingMethod => { const wrapper = mountingMethod(TestComponent, { parentComponent: Parent }) - expect(wrapper.html()).to.contain('Parent Name') + expect(wrapper.html()).toContain('Parent Name') }) it('validates parentComponent option', () => { @@ -27,9 +27,7 @@ describeWithShallowAndMount('options.parentComponent', mountingMethod => { }) const message = '[vue-test-utils]: options.parentComponent should be a valid Vue component options object' - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow({ message }) }) }) }) diff --git a/test/specs/mounting-options/propsData.spec.js b/test/specs/mounting-options/propsData.spec.js index 330310b13..120e403ca 100644 --- a/test/specs/mounting-options/propsData.spec.js +++ b/test/specs/mounting-options/propsData.spec.js @@ -1,4 +1,4 @@ -import { shallowMount } from '@vue/test-utils' +import { shallowMount } from 'packages/test-utils/src' import ComponentWithProps from '~resources/components/component-with-props.vue' import { describeRunIf } from 'conditional-specs' @@ -21,13 +21,13 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'propsData', () => { describe('should not modify propsData between tests', () => { it('should have the correct props after modifying', () => { - expect(wrapper.vm.prop1).to.have.length(2) + expect(wrapper.vm.prop1).toHaveLength(2) wrapper.setProps({ prop1: [] }) - expect(wrapper.vm.prop1).to.have.length(0) + expect(wrapper.vm.prop1).toHaveLength(0) }) it('should have the default props despite being modified in the previous test', () => { - expect(wrapper.vm.prop1).to.have.length(2) + expect(wrapper.vm.prop1).toHaveLength(2) }) }) }) diff --git a/test/specs/mounting-options/provide.spec.js b/test/specs/mounting-options/provide.spec.js index 904958611..1f3d7775f 100644 --- a/test/specs/mounting-options/provide.spec.js +++ b/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 'packages/test-utils/src' +import { createLocalVue } from 'packages/test-utils/src' import ComponentWithInject from '~resources/components/component-with-inject.vue' import CompositionComponentWithInject from '~resources/components/component-with-inject-composition.vue' import { injectSupported } from '~resources/utils' @@ -28,7 +28,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { const wrapper = mountingMethod(ComponentWithInject, { provide: { fromMount: 'objectValue' } }) - expect(wrapper.html()).to.contain('objectValue') + expect(wrapper.html()).toContain('objectValue') } ) @@ -54,8 +54,8 @@ describeWithShallowAndMount('options.provide', mountingMethod => { } }) - expect(wrapper.vm.foo).to.equal('from parent') - expect(wrapper.vm.foo2).to.equal('from config') + expect(wrapper.vm.foo).toEqual('from parent') + expect(wrapper.vm.foo2).toEqual('from config') } ) @@ -81,8 +81,8 @@ describeWithShallowAndMount('options.provide', mountingMethod => { } }) - expect(wrapper.vm.foo).to.equal('from parent') - expect(wrapper.vm.foo2).to.equal('from config') + expect(wrapper.vm.foo).toEqual('from parent') + expect(wrapper.vm.foo2).toEqual('from config') } ) @@ -108,7 +108,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { } }) - expect(wrapper.vm.foo).to.equal('from config') + expect(wrapper.vm.foo).toEqual('from config') } ) @@ -123,7 +123,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { } } }) - expect(wrapper.html()).to.contain('functionValue') + expect(wrapper.html()).toContain('functionValue') } ) @@ -137,7 +137,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { provide: { fromMount: '_' } }) - expect(wrapper.vm.setInBeforeCreate).to.equal('created') + expect(wrapper.vm.setInBeforeCreate).toEqual('created') } ) @@ -154,7 +154,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { localVue }) - expect(wrapper.vm.setInSetup).to.equal('created') + expect(wrapper.vm.setInSetup).toEqual('created') } ) @@ -168,7 +168,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { config.provide['fromMount'] = 'globalConfig' const wrapper = mountingMethod(ComponentWithInject) - expect(wrapper.html()).to.contain('globalConfig') + expect(wrapper.html()).toContain('globalConfig') } ) @@ -182,7 +182,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { provide: { fromMount: '_' } }) - expect(wrapper.html()).to.contain('_') + expect(wrapper.html()).toContain('_') } ) @@ -197,7 +197,7 @@ describeWithShallowAndMount('options.provide', mountingMethod => { localVue }) - expect(wrapper.html()).to.contain('_') + expect(wrapper.html()).toContain('_') } ) @@ -208,6 +208,6 @@ describeWithShallowAndMount('options.provide', mountingMethod => { mountingMethod(ComponentWithInject, { provide: { fromMount: '_' } }) - }).to.throw() + }).toThrow() }) }) diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js index 2bd3fc2a3..7db63c449 100644 --- a/test/specs/mounting-options/scopedSlots.spec.js +++ b/test/specs/mounting-options/scopedSlots.spec.js @@ -1,19 +1,10 @@ import { describeWithShallowAndMount, vueVersion } from '~resources/utils' -import { createLocalVue } from '@vue/test-utils' +import { createLocalVue } from 'packages/test-utils/src' import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue' import { itDoNotRunIf } from 'conditional-specs' import Vue from 'vue' describeWithShallowAndMount('scopedSlots', mountingMethod => { - const sandbox = sinon.createSandbox() - const windowSave = window - - afterEach(() => { - window = windowSave // eslint-disable-line no-native-reassign - sandbox.reset() - sandbox.restore() - }) - itDoNotRunIf(vueVersion < 2.1, 'handles templates as the root node', () => { const wrapper = mountingMethod( { @@ -28,7 +19,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('

\n' + '

bar,123

\n' + '
') + expect(wrapper.html()).toEqual('
\n' + '

bar,123

\n' + '
') }) itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => { @@ -47,7 +38,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('
\n' + '

bar

\n' + '
') + expect(wrapper.html()).toEqual('
\n' + '

bar

\n' + '
') }) itDoNotRunIf( @@ -70,7 +61,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(destructuringWrapper.html()).to.equal('

1,foo

') + expect(destructuringWrapper.html()).toEqual('

1,foo

') const notDestructuringWrapper = mountingMethod( { @@ -87,7 +78,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html()).to.equal('

1,foo

') + expect(notDestructuringWrapper.html()).toEqual('

1,foo

') } ) @@ -112,7 +103,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(destructuringWrapper.html()).to.equal('

1,foo

') + expect(destructuringWrapper.html()).toEqual('

1,foo

') const notDestructuringWrapper = mountingMethod( { @@ -130,7 +121,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html()).to.equal('

1,foo

') + expect(notDestructuringWrapper.html()).toEqual('

1,foo

') } ) @@ -145,54 +136,54 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { noProps: '

baz

' } }) - expect(wrapper.find('#destructuring').html()).to.equal( + expect(wrapper.find('#destructuring').html()).toEqual( '
\n' + '

0,1

\n' + '

1,2

\n' + '

2,3

\n' + '
' ) - expect(wrapper.find('#slots').html()).to.equal( + expect(wrapper.find('#slots').html()).toEqual( '
123
' ) - expect(wrapper.find('#list').html()).to.equal( + expect(wrapper.find('#list').html()).toEqual( '
\n' + '

0,a1

\n' + '

1,a2

\n' + '

2,a3

\n' + '
' ) - expect(wrapper.find('#single').html()).to.equal( + expect(wrapper.find('#single').html()).toEqual( '
\n' + '

abc

\n' + '
' ) - expect(wrapper.find('#noProps').html()).to.equal( + expect(wrapper.find('#noProps').html()).toEqual( '
\n' + '

baz

\n' + '
' ) wrapper.vm.items = [4, 5, 6] wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }] wrapper.vm.bar = 'ABC' await Vue.nextTick() - expect(wrapper.find('#destructuring').html()).to.equal( + expect(wrapper.find('#destructuring').html()).toEqual( '
\n' + '

0,4

\n' + '

1,5

\n' + '

2,6

\n' + '
' ) - expect(wrapper.find('#slots').html()).to.equal( + expect(wrapper.find('#slots').html()).toEqual( '
123
' ) - expect(wrapper.find('#list').html()).to.equal( + expect(wrapper.find('#list').html()).toEqual( '
\n' + '

0,b1

\n' + '

1,b2

\n' + '

2,b3

\n' + '
' ) - expect(wrapper.find('#single').html()).to.equal( + expect(wrapper.find('#single').html()).toEqual( '
\n' + '

ABC

\n' + '
' ) - expect(wrapper.find('#noProps').html()).to.equal( + expect(wrapper.find('#noProps').html()).toEqual( '
\n' + '

baz

\n' + '
' ) }) @@ -213,7 +204,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('
\n' + '

bar

\n' + '
') + expect(wrapper.html()).toEqual('
\n' + '

bar

\n' + '
') }) itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => { @@ -230,7 +221,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('
\n' + '

bar,123

\n' + '
') + expect(wrapper.html()).toEqual('
\n' + '

bar,123

\n' + '
') }) itDoNotRunIf( @@ -246,9 +237,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } const message = '[vue-test-utils]: the scopedSlots option is only supported in vue@2.1+.' - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) } ) @@ -270,14 +259,14 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { return this.$scopedSlots.default(this.val) } } - const stub = sandbox.stub() + const stub = jest.fn() mountingMethod(TestComponent, { scopedSlots: { default: stub } }) await Vue.nextTick() - expect(stub).calledWith(123) + expect(stub).toHaveBeenCalledWith(123) } ) @@ -303,7 +292,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { '' } }) - expect(wrapper.html()).to.equal('
\n

25

\n

50

\n
') + expect(wrapper.html()).toEqual('
\n

25

\n

50

\n
') } ) @@ -327,7 +316,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { named: '' } }) - expect(wrapper.html()).to.equal('
\n

25

\n

50

\n
') + expect(wrapper.html()).toEqual('
\n

25

\n

50

\n
') } ) @@ -352,7 +341,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { localVue }) - expect(wrapper.html()).to.contain('span') + expect(wrapper.html()).toContain('span') } ) @@ -375,7 +364,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { ) wrapper.find('input').setValue('abc') - expect(wrapper.find('input').element.value).to.equal('abc') + expect(wrapper.find('input').element.value).toEqual('abc') } ) }) diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js index 1fc2ddd9d..3c2997def 100644 --- a/test/specs/mounting-options/slots.spec.js +++ b/test/specs/mounting-options/slots.spec.js @@ -5,14 +5,14 @@ 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 'packages/test-utils/src' describeWithShallowAndMount('options.slots', mountingMethod => { it('mounts component with default slot if passed component in slot object', () => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: Component } }) - expect(wrapper.contains(Component)).to.equal(true) + expect(wrapper.contains(Component)).toEqual(true) }) itDoNotRunIf( @@ -33,7 +33,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { }, localVue }) - expect(wrapper.contains('time')).to.equal(true) + expect(wrapper.contains('time')).toEqual(true) } ) @@ -41,7 +41,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [Component] } }) - expect(wrapper.contains(Component)).to.equal(true) + expect(wrapper.contains(Component)).toEqual(true) }) it('mounts component with default slot if passed compiled options in slot object', () => { @@ -49,7 +49,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [compiled] } }) - expect(wrapper.contains('#div')).to.equal(true) + expect(wrapper.contains('#div')).toEqual(true) }) itDoNotRunIf( @@ -59,7 +59,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: '' } }) - expect(wrapper.contains('span')).to.equal(true) + expect(wrapper.contains('span')).toEqual(true) } ) @@ -70,7 +70,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentAsAClass, { slots: { default: '' } }) - expect(wrapper.contains('span')).to.equal(true) + expect(wrapper.contains('span')).toEqual(true) } ) @@ -84,7 +84,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [Component] } }) - expect(wrapper.contains(Component)).to.equal(true) + expect(wrapper.contains(Component)).toEqual(true) window = windowSave // eslint-disable-line no-native-reassign } ) @@ -107,9 +107,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { slots: { default: '' } }) try { - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) } catch (err) { require.cache[ require.resolve('vue-template-compiler') @@ -127,7 +125,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [''] } }) - expect(wrapper.contains('span')).to.equal(true) + expect(wrapper.contains('span')).toEqual(true) } ) @@ -138,8 +136,10 @@ describeWithShallowAndMount('options.slots', mountingMethod => { 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] + delete require.cache[require.resolve('packages/test-utils/src')] + const mountingMethodFresh = require('packages/test-utils/src')[ + mountingMethod.name + ] const message = '[vue-test-utils]: vueTemplateCompiler is undefined, you must pass precompiled components if vue-template-compiler is undefined' const fn = () => @@ -147,9 +147,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { slots: { default: [''] } }) try { - expect(fn) - .to.throw() - .with.property('message', message) + expect(fn).toThrow(message) } catch (err) { require.cache[ require.resolve('vue-template-compiler') @@ -168,7 +166,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { footer: [Component] } }) - expect(wrapper.findAll(Component).length).to.equal(2) + expect(wrapper.findAll(Component).length).toEqual(2) }) it('mounts component with default and named slots', () => { @@ -178,8 +176,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => { footer: '

world

' } }) - expect(wrapper.html()).to.contain('hello') - expect(wrapper.html()).to.contain('

world

') + expect(wrapper.html()).toContain('hello') + expect(wrapper.html()).toContain('

world

') }) it('mounts component with default and named text slot', () => { @@ -189,7 +187,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { default: 'hello,' } }) - expect(wrapper.text()).to.contain('hello, world') + expect(wrapper.text()).toContain('hello, world') }) it('mounts functional component with text slot', () => { @@ -205,7 +203,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { header: 'world' } }) - expect(wrapper.text()).to.contain('hello,world') + expect(wrapper.text()).toContain('hello,world') }) it('mounts component with named slot if passed component in slot object', () => { @@ -214,8 +212,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => { header: Component } }) - expect(wrapper.findAll(Component).length).to.equal(1) - expect(Array.isArray(wrapper.vm.$slots.header)).to.equal(true) + expect(wrapper.findAll(Component).length).toEqual(1) + expect(Array.isArray(wrapper.vm.$slots.header)).toEqual(true) }) it('mounts functional component with default slot if passed component in slot object', () => { @@ -227,7 +225,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(TestComponent, { slots: { default: Component } }) - expect(wrapper.contains(Component)).to.equal(true) + expect(wrapper.contains(Component)).toEqual(true) }) it('mounts component with default slot if passed component in slot object', () => { @@ -239,7 +237,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(TestComponent, { slots: { default: [Component] } }) - expect(wrapper.contains(Component)).to.equal(true) + expect(wrapper.contains(Component)).toEqual(true) }) it('mounts component with default slot if passed object with template prop in slot object', () => { @@ -252,7 +250,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(TestComponent, { slots: { default: [compiled] } }) - expect(wrapper.contains('#div')).to.equal(true) + expect(wrapper.contains('#div')).toEqual(true) }) itDoNotRunIf( @@ -267,7 +265,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { const wrapper = mountingMethod(TestComponent, { slots: { default: '' } }) - expect(wrapper.contains('span')).to.equal(true) + expect(wrapper.contains('span')).toEqual(true) } ) @@ -277,7 +275,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { default: ['