Skip to main content


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 configuration

Follow this guide if you're using the if you're using the unit-jest plugin.

  1. Install the @stryker-mutator/jest-runner plugin: npm i -D @stryker-mutator/jest-runner or yarn add --dev @stryker-mutator/jest-runner.
  2. Install crossenv plugin(if you haven't already): npm i -D cross-env or yarn add -D cross-env.
  3. Create a "stryker.conf.json" file that looks like this:
    "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",
    "mutator": {
    "plugins": []
    "tempDirName_comment": "Jest doesn't play nice with the default (.stryker-tmp).",
    "tempDirName": "stryker-tmp",
    "testRunner": "jest",
    "coverageAnalysis": "off"
  4. Add stryker-tmp to your .gitignore file.
  5. Add this script to your package.json:
    "scripts": {

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 configuration

Follow 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 mocha

Follow these steps to be able "manually" run webpack and mocha.

  1. Install webpack-cli and glob: npm i -D webpack-cli glob or yarn add --dev webpack-cli glob.

  2. Create a webpack.config.stryker.js file with the following content:

    // webpack.config.stryker.js
    const glob = require('glob');

    // Set env
    process.env.BABEL_ENV = 'test';
    process.env.NODE_ENV = 'test';
    process.env.VUE_CLI_BABEL_TARGET_NODE = 'true';
    process.env.VUE_CLI_TRANSPILE_BABEL_RUNTIME = 'true';
    process.env.BUILD_ENV = 'testing';

    // Load webpack config
    const conf = require('@vue/cli-service/webpack.config.js');

    // Override the entry files
    conf.entry = {
    // Choose your test files here:
    tests: ['./test/setup-unit.js', ...glob.sync('src/**/*+(spec).js').map((fileName) => `./${fileName}`)],

    module.exports = conf;
  3. Try it out: npx webpack --config webpack.config.stryker.js. This should create a dist directory with these files dist/js/chunk-vendors.js and dist/js/tests.js.

    $ npx webpack --config webpack.config.stryker.js
    Starting type checking service...
    Using 1 worker with 2048MB memory limit

    DONE Compiled successfully in 5343ms

    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
  4. Now test out a test run with mocha. Run npx mocha --require @vue/cli-plugin-unit-mocha/setup.js dist/js/chunk-vendors.js dist/js/tests.js.

This needs to work first before progressing to the next step. You might need to tweak your webpack.config.stryker.js file in order to make this work.

Configure and run Stryker

Once mocha runs succesfully on the webpack output, you're ready to install and run Stryker:

  1. Install the @stryker-mutator/mocha-runner plugin: npm i -D @stryker-mutator/mocha-runner or yarn add --dev @stryker-mutator/mocha-runner.
  2. Create your stryker.conf.json file:
    "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",
    "testRunner": "mocha",
    "concurrency": 2,
    "coverageAnalysis": "perTest",
    "symlinkNodeModules": false,
    "buildCommand": "webpack --config webpack.config.stryker.js",
    "mutator": {
    "plugins": []
    "mochaOptions": {
    "package": "package.json",
    "require": ["@vue/cli-plugin-unit-mocha/setup.js"],
    "spec": ["dist/js/chunk-vendors.js", "dist/js/tests.js"]
  3. Add .stryker-tmp to your .gitignore file.
  4. Add this script to your package.json:
    "scripts": {
    "test:mutation": "stryker run"

Now give it a go with npm run test:mutation or yarn test:mutation.


Please take a look at the troubleshooting page when you run into any problems setting up StrykerJS.