Stryker: Add React support

[simondel]

Users who write awesome React apps should be able to use Stryker to test their apps.

Todo list:

• [x] Support mutating modern JS code (stryker-javascript-mutator plugin)
• [x] Support Babel projects (stryker-babel-transpiler plugin)
• [x] Don't crash when users try to mutate JSX #545
• [ ] Support Webpack projects (@Archcry)
• [ ] Test React projects

Do you have a React app? Please let us know!

It would be awesome if it's open source but that's not a requirement.

Known users/setups:
@CrazyBS: React, Redux, Babel, Karma, Mocha (#101)
@SxMShaDoW create-react-app -> React, Babel, Jest (#133)
@Venkat-18 React, Jest

The post above will be kept up-to-date and is subject to change!

[nicojs]

What tool and command is used to run react tests? For example: angular uses karma, but running tests is done using ng test most of the time.

[Archcry]

Typical react projects created with the create-react-app tool don't use an cli, they use simple npm scripts that execute a test suite. The npm test command invokes this file:

'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const jest = require('jest');
const argv = process.argv.slice(2);

// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
  argv.push('--watch');
}


jest.run(argv);

You can setup your project however you want but I think having support for create-react-app projects is a good starting point.

[Archcry]

My mistake, react does have react-scripts, but it is possible to eject the project with npm run eject. I am not sure this is what we want though.

[Archcry]

React uses jest as testing framework, this means that it does not use Webpack for testing at all. When jest is configured correctly it should be able to test any react project. The current plugin for jest in Stryker does not support this unfortunately due to the lack of correct configuration.

[nabilnaffar]

+Add CSS-modules loader support

Error: Cannot find module './Button.css' from 'Button.js'

[simondel]

@nabilnaffar when do you get this error? During the initial test run? Could you post the files array of your stryker.conf.js?

[yuri-sakharov]

Hi,
Our project on react. I try to add stryker add got https://github.com/stryker-mutator/stryker/issues/607.
The project was not created via create-react-app
The part of our package.json:

...
"react": "16.2.0",
"redux": "3.7.2",
"@babel/core": "7.0.0-beta.39",
"@babel/polyfill": "7.0.0-beta.39",
"enzyme": "3.3.0",
"jsdom": "11.6.2",
"mocha": "5.0.0",
"webpack": "3.10.0",
"postcss-loader": "2.1.0",
"less": "2.7.3",
"less-loader": "4.0.5",
...

[nabilnaffar]

@simondel I'm using webpack css-loader modules option to import css files in jsx (see https://github.com/webpack-contrib/css-loader/blob/master/README.md#modules)

[nicojs]

@nabilnaffar could you create a new issue for your error, we will close this issue once we've verified that it works on our react projects.

[nabilnaffar]

@nicojs sure. will it support Typescript mutations too?

[nicojs]

@nabilnaffar yes it will. The mutator part is a different plugin from the transpiler part.

In other words: you could choose mutator: 'typescript' while still choosing the transpilers: [ 'babel' ] (or webpack, ...).

[wmeints]

I was able to run mutation tests on a combination of Typescript and React created using create-react-app --scripts-version react-scripts-ts. I didn't need to eject it.

I use mutator: 'typescript' and jest as test framework. I don't use the transpilers: ['webpack'] since that's not required for the combination I use.

Didn't experience any problems with that setup.

[simondel]

I'll close this issue for now. If people have trouble getting a React project up and running, let us know!