How to set babel environment in wallaby #285

Closed
okonet opened this Issue Oct 6, 2015 · 5 comments

Projects

None yet

2 participants

@okonet
Contributor
okonet commented Oct 6, 2015

babel supports different environments (https://babeljs.io/docs/usage/options/) which is useful for dev/production configs. For example, here is my .babelrc

{
    "stage": 0,
    "optional": ["runtime"],
    "plugins": [
        "lodash"
    ],
    "env": {
        "development": {
            "plugins": [
                "react-display-name",
                "react-transform"
            ],
            "extra": {
                "react-transform": {
                    "transforms": [
                        {
                            "transform": "react-transform-hmr",
                            "imports": ["react"],
                            "locals": ["module"]
                        }, {
                            "transform": "react-transform-catch-errors",
                            "imports": ["react", "redbox-react"]
                        }
                    ]}
            }
        }
    }
}

I don't want to use react hot loading in my test runner, and thus have to find a way to tell babel to env other than development. I've tried to do that using runner option (http://wallabyjs.com/docs/config/runner.html) in my wallaby config, but it seems it doesn't change anything. Please advise how to set up a env for babel.

@okonet
Contributor
okonet commented Oct 6, 2015

Worth noting: I'm using mocha and browser environment in tests...

I've also tried:

bootstrap: function (wallaby) {
      process.env.NODE_ENV = "test";
    }

This one gives me an error: Runtime error: ReferenceError: Can't find variable: process

@ArtemGovorov
Member

Hi Andrey,

you were just one step away from the solution.

runner option sets env properties of a test runner (that is browser/phantom in this case) and by then files are already processed by babel, same for the bootstrap function (it executed in context of the browser, so there's no process variable).

What you need is to set the env property before wallaby.js compiles/processes files with babel. Wallaby loads its config file first, then from it it sees that you have configured babel, etc. So anywhere in your config, for example at the very top, you may do:

// whenever wallaby loads the config file (and later uses babel),
// babel will know that we are in the `test` env
process.env.BABEL_ENV = 'test';

module.exports = function (wallaby) {
  return {
    files: [...],
    tests: [...],
    compilers: {...}
    ...
  };
};

Please let me know if it works for you.

@okonet
Contributor
okonet commented Oct 7, 2015

Thanks for a detailed answer! It worked like a charm. 👏

Mind adding this to the documentation of runner/babel setup on the web-site?

@ArtemGovorov ArtemGovorov closed this in b5a90d8 Oct 7, 2015
@ArtemGovorov
Member

Awesome, thanks. Have added a paragraph to the runner page and section to the babel page.

@okonet
Contributor
okonet commented Oct 7, 2015

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment