cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.52k stars 3.15k forks source link

Feature-Request: support babel.config.js #8724

Open jamesarosen opened 5 years ago

jamesarosen commented 5 years ago

Current behavior:

@cypress/webpack-preprocessor supports Babel out of the box with a default configuration:

{
  presets: [require.resolve('@babel/preset-env')],
}

Desired behavior:

babel@^7.0.0 uses the babel.config.js file to configure its presets and plugins. Other libraries like babel-jest pick up this configuration automatically. It would be nice if this package would do the same before falling back to its default configuration.

How to reproduce:

Create an application with a babel.config.js that differs from this package's defaults. This package's defaults will be used.

Additional Info (images, stack traces, etc)

jamesarosen commented 5 years ago

I was able to do this:

// cypress/plugins/index.js:

const webpack = require('@cypress/webpack-preprocessor')
const babelConfig = require('../../babel.config')

module.exports = on => {
  on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        module: {
          rules: [
            {
              test: /\.jsx?$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: 'babel-loader',
                  options: babelConfig,
                },
              ],
            },
          ],
        },
      },
    }),
  )
}
rarrior commented 2 years ago

I'm not able to make this work:

module.exports = on => {
  on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        module: {
          rules: [
            {
              test: /\.jsx?$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: 'babel-loader',
                  options: {
                    presets: [
                      ["@babel/preset-react", {
                        "runtime": "automatic"
                      }]
                  },
                },
              ],
            },
          ],
        },
      },
    }),
  )
}

I cannot avoid the error saying that (uncaught exception) ReferenceError: React is not defined