VueJS
Stryker supports Vue projects. It can mutate both your js/ts files as the script tags in your *.vue
files.
This article will explain how to configure Stryker with the vue-cli. If you're not using the vue-cli, you'll have to configure Stryker manually.
To get started using Stryker with the vue-cli, first install the core package: npm i -D @stryker-mutator/core
or yarn add --dev @stryker-mutator/core
. Next follow the guide for Jest or Mocha based on if you're using the unit-jest plugin or the unit-mocha plugin.
Keep in mind that you may have to change some configuration settings such as paths to files.
#
Jest configurationFollow this guide if you're using the if you're using the unit-jest plugin.
- Install the
@stryker-mutator/jest-runner
plugin:npm i -D @stryker-mutator/jest-runner
oryarn add --dev @stryker-mutator/jest-runner
. - Install
crossenv
(if you haven't already)npm i -D [email protected]/jest-runner
plugin. - Create a "stryker.conf.json" file that looks like this:
- Add
stryker-tmp
to your.gitignore
file. - Add this script to your package.json:
Now give it a go with npm run test:mutation
or yarn test:mutation
.
Note that it is important to configure BABEL_ENV
, VUE_CLI_TRANSPILE_BABEL_RUNTIME
and VUE_CLI_BABEL_TARGET_NODE
environment variables. This is done with the test:mutation
script.
#
Mocha configurationFollow this guide if you're using the if you're using the unit-mocha plugin.
To enable Stryker with your vue-cli project, we will have to rebuild parts of the unit-mocha
plugin in Stryker configuration here. First we'll make unit tests run by running webpack and mocha separately. Next we'll configure Stryker to use it. After following this guide you can also opt to remove the "unit-mocha" vue-cli plugin entirely and use this setup for normal unit testing as well.
#
Rebuild unit tests with webpack and mochaFollow these steps to be able "manually" run webpack and mocha.
Install
webpack-cli
andglob
:npm i -D webpack-cli glob
oryarn add --dev webpack-cli glob
.Create a
webpack.stryker.config.js
file with the following content:Try it out:
npx webpack --config webpack.stryker.config.js
. This should create adist
directory with these filesdist/js/chunk-vendors.js
anddist/js/tests.js
.
Hash: 8a4d024467cd0b96397e Version: webpack 4.44.2 Time: 5343ms Built at: 10/06/2020 9:49:20 PM Asset Size Chunks Chunk Names favicon.ico 4.19 KiB [emitted] index.html 1.02 KiB [emitted] js/tests.js 1000 KiB tests [emitted] tests version.json 91 bytes [emitted] Entrypoint tests = js/tests.js
- Add
.stryker-tmp
to your.gitignore
file. - Add this script to your package.json:
Now give it a go with npm run test:mutation
or yarn test:mutation
.