Running Nighwatch.js with Babel 7 @babel/register

2.7k Views Asked by At

I have a client repository with React 15.3, Webpack 4, and Babel 7. Webpack works as a charm, but our E2E testing suite using Nightwatch 0.9.20 fails to compile with the new @babel/register package.

Our company is upgrading our babel version from 6 to 7.

Floating around the internet a solution to add the following to the babel.config.js file:

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

In our instance, this solution doesn't resolve our problem.

I should mention the structure of the project is as follows:

client // where nightwatch is run from the terminal
  |-- tests // our E2E tests
  |-- nightwatch.conf.js
  |-- nighwatch_globals.js
  |-- babel.config.js

api // a completely separate repository
  |-- tests // we store factory definitions here as well
  |-- db
       |-- models // also a frequently referenced directory in our E2E tests

Our nightwatch.conf.js structure looks like this:

require('@babel/register')(); // this has been upgraded from 'babel-register'
require('dotenv').config();

...

module.exports = {
  // nightwatch configurations

  "globals_path": "./nightwatch_globals.js",

  // more nightwatch configurations
}

Our nightwatch_globals.js file (where the error is being called looks like this:

import fetch from 'isomorphic-fetch';

module.exports = {
  reporter: function(results, cb) {
    fetch('http://localhost:4444/selenium-server/driver/?cmd=shutDownSeleniumServer').then(() => {
      cb();
      if (
        (typeof(results.failed) === 'undefined' || results.failed === 0) &&
          (typeof(results.error) === 'undefined' || results.error === 0)
      ) {
          process.exit(0);
      } else {
          process.exit(1);
      }
    });
  },
  // give the db some time to finish ops from previous test before
  // clearing db and starting the next test
  before: function(done) {
    require('./../eka-api/test/factories/index.js');
    done();
  },
  beforeEach: function(done) {
    setTimeout(function() {
      done();
    }, 5000);
  },
};

And our babel.config.js file is the following:


module.exports = function(api) {
  api.cache(true);

  const presets = [
    "@babel/preset-env",
    "@babel/react",
    "@babel/preset-flow",
  ];

  const plugins = [
    "@babel/plugin-syntax-flow",
    "@babel/transform-flow-strip-types",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    // react hot loader must come before class properties plugin
    "react-hot-loader/babel",
    // class properties plugin must come after decorators
    // if decorators has a 'legacy' attribute, class properties must be loose
    ["@babel/plugin-proposal-class-properties", {"loose" : true}],
    "@babel/plugin-transform-runtime"
  ];

  return {
    presets,
    plugins
  };
};

From the client directory I run in the terminal node nightwatch.conf.js ; nightwatch

Here is the persisting error

/Users/myUser/Documents/api/test/factories/index.js:1
(function (exports, require, module, __filename, __dirname) { import bluebird from 'bluebird';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._compile (/Users/myUser/Documents/eka-client/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (module.js:580:10)
    at Object.newLoader [as .js] (/Users/myUser/Documents/eka-client/node_modules/pirates/lib/index.js:104:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)

My intuition tells me that the reason why the import token is not recognized has to do with how Babel 7 is scoping the compilation of code down to the process.cwd(). As you see the error is coming from the api. Since nightwatch is a package in the client directory, Babel isn't compiling the api directory (which is still on Babel 6). However, I'd like to avoid having to refactor our entire client testing suite to be independent of the api files.

I suspect the solution is to find a way for @babel/register to compile the api from the client side, but I don't know how I'd go about doing something like this.

0

There are 0 best solutions below