Nightwatch Babel 7 setup: Unexpected identifier

Question

I recently gave a try to Babel 7 on my React project. The upgrade path despite being complex was actually pretty smooth. However, I'm stuck on the setup of Nightwatch with Babel 7. All the documentation I could find concerns Babel 6 which are kind of different. I still tried to go as far as I could, but I got stuck at a certain point with no path to a solution. I'm on React 16.8.3, Nightwatch 1.0.18 and Babel 7, I updated all the dependencies following the official documentation.

Here's my Nightwatch config:

require('@babel/register')({
  extends: './.babelrc',
  extensions: '.js',
});

const reportBucket = 'admin';
const reportFolder = `./reports/${reportBucket}`;
const screenshotFolder = `/nightwatch/screenshots/${reportBucket}`;

module.exports = {
  src_folders: ['./specs'],
  output_folder: reportFolder,
  page_objects_path: './pages',
  custom_commands_path: './commands',
  globals_path: './globals.js',
  test_settings: {
    default: {
      launch_url: process.env.TEST_URL.replace(':443', ''),
      selenium_host: process.env.SELENIUM_HOST,
      selenium_port: process.env.SELENIUM_PORT,
      silent: true,
      end_session_on_fail: false, // keep session open to get screenshot on teardown
      use_xpath: true,
      request_timeout_options: {
        timeout: 300000,
      },
      screenshots: {
        enabled: true,
        path: screenshotFolder,
        on_failure: true,
        on_error: true,
      },
      desiredCapabilities: {
        'browserstack.use_w3c': 'true',
        'browserstack.user': process.env.BROWSERSTACK_USER,
        'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY,
        'browserstack.local': true,
        'browserstack.localIdentifier': process.env.BROWSERSTACK_LOCAL_ID,
        'browserstack.selenium_version': process.env.SELENIUM_VERSION,
        project: 'TEST',
        build: process.env.BUILD_TAG,
        name: process.env.SELENIUM_BROWSERS,
        resolution: '1920x1080',
        javascriptEnabled: true,
        acceptSslCerts: true,
        browserName: 'chrome',
        acceptInsecureCerts: true,
      },
    },
    chrome: {
      desiredCapabilities: {
        os: 'windows',
        os_version: '10',
        browserName: 'chrome',
        browser_version: '71.0',
        'goog:chromeOptions': {
          args: [
            '--enable-automation',
            '--disable-web-security',
            '--disable-infobars',
          ],
        },
      },
    },
    firefox: {
      desiredCapabilities: {
        /*
          react-select does not work when the browser is not
          the app in focus in the OS.
          This was failing all tests that included this component
          so we exculsively run on windows on browserstack
          to avoid this issue
          the core of the issue is that when firefox not in focus, 'mousedown'
          is not triggered. All other selenium events seem fine (click, key, etc)
        */
        os: 'windows',
        os_version: '10',
        browserName: 'firefox',
        browser_version: '64.0',
        marionette: true,
        acceptInsecureCerts: true,
      },
    },
    ie11: {
      desiredCapabilities: {
        /*
          windows 10 needed so input values are
          cleared and set properly. win 8 driver has issues
        */
        os: 'windows',
        os_version: '10',
        browserName: 'ie',
        browser_version: '11.0',
        acceptInsecureCerts: true,
      },
    },
    edge: {
      desiredCapabilities: {
        os: 'windows',
        os_version: '10',
        browserName: 'edge',
        browser_version: '17.0',
        acceptInsecureCerts: true,
      },
    },
  },
  parallel_process_delay: 1000,
  live_output: true,
  test_workers: {
    enabled: true,
    workers: parseInt(process.env.TEST_WORKERS, 10) || 1,
  },
};

Notice that I use @babel/register at the top (upgrading from babel-register

After following this post: https://babeljs.io/docs/en/v7-migration I also updated my .babelrc for my nightwatch test suit as follow:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

With this configuration, if I try to run any Nightwatch test I'm getting the following:

  TEST FAILURE: 1 error during execution 0 tests failed, 0 passed. 104ms

  Unexpected identifier
   import test from '../../../lib/random';
          ^^^^

   SyntaxError: Unexpected identifier
       at new Script (vm.js:79:7)
       at createScript (vm.js:251:10)
       at Object.runInThisContext (vm.js:303:10)
       at Module._compile (internal/modules/cjs/loader.js:657:28)
       at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
       at Module.load (internal/modules/cjs/loader.js:599:32)
       at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
       at Function.Module._load (internal/modules/cjs/loader.js:530:3)

Has anyone been able to fix a similar issue? I tried different babel configs but can't seem to make it work.

Answer 1

Ok after poking around I found a babel config for babel 7 that fixes this issue:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs",
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "add-module-exports",
  ]
}