Cypress: Cypress cannot prepare tests using babel.config.js in repo

[lao9]

Current behavior:

When we used .babelrc we had no issues with Cypress, but since upgrading to babel 7 (which required certain other dependencies to use babel.config.js, like jest) it is no longer able to run our tests. We get the following error:

Oops...we found an error preparing this test file. Error [BABEL] Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables.

The solution proposed in https://github.com/cypress-io/cypress/issues/2638 to rename babel.config.js to .babelrc.js is insufficient for the new upgrade.

Our babel.config.js file looks like this:

module.exports = api => {
  api.cache(false)

  const plugins = [
    "relay",
    [
      "emotion",
      {
        sourceMap: true,
        autoLabel: true,
        labelFormat: "[filename]--[local]",
      },
    ],
  ]

  const presets = [["react-app", { flow: true, typescript: false }]]

  const env = {
    test: {
      plugins: ["dynamic-import-node"],
    },
    production: {
      plugins: [
        [
          "emotion",
          {
            sourceMap: false,
            autoLabel: true,
            labelFormat: "[filename]--[local]",
          },
        ],
      ],
    },
  }

  return {
    plugins,
    presets,
    env,
  }
}

Workaround solution

We created a workaround so that cypress doesn't try to use our babel.config.js file when preparing to run our tests.

module.exports = process.env.CYPRESS_ENV
  ? {} // workaround for https://github.com/cypress-io/cypress/issues/2945
  : api => {
      api.cache(false)
       const plugins = [
        "relay",
        [
          "emotion",
          {
            sourceMap: true,
            autoLabel: true,
            labelFormat: "[filename]--[local]",
          },
        ],
      ]
       const presets = [["react-app"]]
       const env = {
        test: {
          plugins: ["dynamic-import-node"],
        },
        production: {
          plugins: [
            [
              "emotion",
              {
                sourceMap: false,
                autoLabel: true,
                labelFormat: "[filename]--[local]",
              },
            ],
          ],
        },
      }
       return {
        plugins,
        presets,
        env,
      }
    }

Desired behavior:

To be able to run Cypress with babel.config.js.

Versions

Cypress v3.1.2
@babel/core: 7.2.0
babel-jest: 23.6.0
babel-core: 7.0.0-bridge
babel-loader: 8.0.4
jest: 22.1.4
babel-preset-react-app: 6.1.0,

[chopfitzroy]

Similar issue I am getting:

./testing/suites/e2e/specs/test.js
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
/path/to/project/babel.config.js: Error while loading config - Unexpected token ...

And my babel.config.js:

module.exports = api => ({
  presets: ["@vue/app"],
  ...(api.env("test") && { plugins: ["require-context-hook"] })
});

I am working around this with the following for now:

module.exports = api => {
    // NO es6 https://github.com/cypress-io/cypress/issues/2945
    const test = {
        presets: ["@vue/app"],
    };

    if(api.env("test")) test.plugins = ["require-context-hook"];

    return test;
};

[andywarren86]

I ran into this problem in a Vue CLI project with both @vue/cli-plugin-babel (3.8.0) and @vue/cli-plugin-e2e-cypress (3.8.0), and then trying to use JS class syntax in my specs.

Similar to above workarounds I was able to use the Babel config function API to return an empty config when called from Cypress.

module.exports = api => {
  // workaround for https://github.com/cypress-io/cypress/issues/2945
  if (api.cache.using(() => process.env.CYPRESS_ENV)) {
    return {};
  }
  return {
    presets: [
      '@vue/app'
    ]
  };
};

Another solution was to change babel.config.js to a .babelrc JSON file instead.

[jozefs]

For those trying @andywarren86's suggestion, please note that CYPRESS_ENV has recently been renamed to CYPRESS_INTERNAL_ENV (see https://github.com/cypress-io/cypress/commit/2ba53f6837fa057d1142f861bd62031cca2731a2).