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 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": {
       "test:mutation": "cross-env BABEL_ENV=test VUE_CLI_TRANSPILE_BABEL_RUNTIME=true VUE_CLI_BABEL_TARGET_NODE=true VUE_CLI_BABEL_TRANSPILE_MODULES=true stryker run"
     }
   }

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.

Troubleshooting

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