vue-test-with-jsdom

desc

test vue with jsdom

note: you can also test your project with Vue CLI

some deps for test

• vue-test-utils
• mocha & mocha-webpack (test with mocha framework)
• jsdom & jsdom-global (for setting up DOM environment in tests)
• webpack-node-externals (for excluding NPM deps from test bundle)
• expect (for assertions)
  • This is the package used internally by Jest, so usage is the same. You can also use chai + sinon.
• nyc & babel-plugin-istanbul (for coverage)

some config

package.json

01.Added test script (package.json)

02.set for nyc coverage with nyc (package.json)

webpack.config.js

01.exclude NPM deps from test bundle (webpack.config.js)

02.use inline source map so that it works with mocha-webpack (webpack.config.js)

test/setup.js

01.Global setup JSDOM for tests (test/setup.js)

02.Global setup expect for tests (test/setup.js)

note: run first with mocha-webpack's --require flag (package.json).

.babelrc

01.set test env symbol (.babelrc)

02.use istanbul plugin for test (.babelrc)

some command

# run for dev env
npm run dev
# run for pro env
#npm run pro
# run for tes env
npm run tes

# run build
# run build for dev
npm run build:dev
# run build for pro
npm run build:pro

for dev env , use cross-env passed key NODE_ENV with val 'dev' for process.env . use webpack 's webpack-dev-server to setup a simple server . passed --open to open browser , --hot to automaticaly refresh .

for pro env , use cross-env passed key NODE_ENV with val 'pro' for process.env . use webpack by cli. passed --progress to get process progress , --hide-modules to hide lib in node_modules dir.

for tes env , use cross-env passed key NODE_ENV with val 'tes' for process.env . use nyc by cli : passed --reporter=lcov and --reporter=text to set reporter for lcov and text . use mocha-webpack by cli : use webpack to build then run mocha ,passed --webpack-config webpack.config.js to set the webpack config file ,passed --require test/setup.js to load test/setup.js before test the files test/**/*.spec.js

get more

For detailed explanation on how he work, consult webpack.

For detailed explanation on how he work, consult webpack-cli.

For detailed explanation on how he work, consult webpack-dev-server.

For detailed explanation on how he work, consult webpack-node-externals.

For detailed explanation on how he work, consult mocha-webpack.

For detailed explanation on how he work, consult mocha.

For detailed explanation on how he work, consult nyc.

For detailed explanation on how he work, consult babel-plugin-istanbul.

For detailed explanation on how he work, consult jsdom.

author

yemiancheng ymc-github@gmail.com

contributor

Evan You yyx990803@gmail.com

license

MIT