Stryker: Support for babel.config.js

[Djaler]

Summary

At the moment I can only specify babelrc location, but I don't use it in my application

Add stryker.log

17:17:52 (7962) INFO BabelConfigReader Reading .babelrc file from path "/home/kromanov/Projects/sow/frontend/babel.config.js"
17:17:52 (7962) ERROR BabelConfigReader Error while reading .babelrc file: SyntaxError: Unexpected token m in JSON at position 0

[jayands]

@Djaler Right now, stryker doesn't support Babel 7: (c.f. this package.json file)

I'm saying because I ran into the same problem. Either you're going to have to go down to 6 or wait for/create yourself Babel 7 support.

[nicojs]

Thanks to you both. We're definitely aware of this and will add support in the near future. Stay tuned.

[simondel]

We have Babel 7 support now, so we can start to do this 🎉

[Mrna1]

@nicojs @simondel : Good day, Is this functionality already released? I updated stryker to last release versions and still gets:

ERROR BabelConfigReader Error while reading "C:....babelrc.js" file: SyntaxError: Unexpected token c in JSON at position 0

"stryker": "^0.35.1",
"stryker-api": "^0.24.1",
"stryker-babel-transpiler": "^0.10.1",
"stryker-html-reporter": "^0.18.1",
"stryker-mocha-framework": "^0.15.1",
"stryker-mocha-runner": "^0.17.1",
"stryker-typescript": "^0.18.1",

[nicojs]

Hi @Mrna1 could you please show me your babelrc.js file? It should contain JSON content (not javascript).

[Mrna1]

@nicojs: So you do not support js files. Is that right? Will it be in the future?

[nicojs]

Could you please give me an example of a babel config file that is a js file? I didn't know babel allows it. We want to reach feature parity between the stryker babel-transpiler with the babel cli, so a link to the official docs would help.

It also helps if this issue gets upvoted because our time is limited and we're focussing on the features with the most impact.

[nicojs]

Also, you can use arbitrary javascript with a stryker.conf.js file by require-ing your babel configuration:

babel: {
    options: require('./babelrc.js')
     // Add extensions here
    extensions: [/*'.ts'*/]
}
transpilers: [
    'babel' // Enable the babel transpiler
],

[Mrna1]

@nicojs: Thank you. I gonna try that. :)

[jayands]

Link to the official docs, you say?

Also note, that as of 7.x (emphasis added):

We recommend to use the babel.config.js format. Babel itself is using it.

[Mrna1]

@nicojs: Sorry for a late answer. Babel supports js files. Check the official babel side, which was sent by jayands.
I can send you example of the babelrc.js to your email if you want. It is used for resolving of magic paths.

[ZEVEKE]

@Mrna1 Can you send an example of stryker.config.js that supports babel?
email denys.[email protected]
or right here, if you want

[nicojs]

Thanks @jayands and @Mrna1

We should indeed support this. For now, you can use the workaround:

babel: {
    options: require('./babel.config')
     // Add extensions here
    extensions: [/*'.ts'*/]
}
transpilers: [
    'babel' // Enable the babel transpiler
],

[kmdrGroch]

shouldn't it be closed?

[Djaler]

I don't think so. Solution from #1422 doesn't work with files that exports object. Example:

module.exports = {
    presets: [
        '@vue/app',
    ],
};

[Djaler]

Also, there is error even with function-style config:
Error while reading "/home/kromanov/Projects/perimeter/frontend/babel.config.js" file: TypeError: api.cache.forever is not a function

I debug this and see that options.babel.optionsApi is { cache: {}} while I set it to

{
    cache: {
        forever: () => {},
    },
}

looks like the source of this problem is serializing config to plain json in ChildProcessProxyWorker.send

[Djaler]

Now it works with object-style config (#1762), so I'll close this.
But, @nicojs, can you check this, please: https://github.com/stryker-mutator/stryker/issues/1249#issuecomment-534946691

[nicojs]

Also, there is error even with function-style config:

@Djaler could you explain to me what optionsApi should be? A small reproduction repo would be great! (or a zip/tarball attached to this issue). I'm at a loss of how the strykerOptions.babel.optionsApi should work. Is it even needed? Or can it be removed?

looks like the source of this problem is serializing config to plain json in ChildProcessProxyWorker.send

Yes, the config should be serializable. We're using surrial under the hood, so we can serialize simple functions and regexes, but it has limitations.

[Djaler]

@nicojs

stryker-babel-example.tar.gz

And check commits log

[nicojs]

Hmm ok, So the idea is that you configure an optionsApi to be passed through to the babel function, is that correct? In your example you've added this object:

   // stryker.conf.js

    optionsApi: {
      cache: {
        forever: () => {
        }
      }
    }

In your babel.config.js:

module.exports = (api) => {
    api.cache.forever();
    // ...
}

So the api.cache.forever here will be a no-operation. Is this desirable? Shouldn't we be passing an actual babel options api object?

I think we should remove the undocumented feature of passing an optionsApi object. If you want to do it, you still could in this way:

// babel.stryker.config.js
module.exports = require('./babel.config.js')({ cache: { forever() {} } });

   // stryker.conf.js
babel: {
    optionsFile: './babel.stryker.config.js'
}

Do you agree?