0

React 15.3、Webpack 4、および Babel 7のリポジトリがありclientます。Webpack は魅力的に機能しますが、Nightwatch 0.9.20 を使用する E2E テスト スイートは新しい@babel/registerパッケージでコンパイルできません。

当社は、babel のバージョンを 6 から 7 にアップグレードしています。

babel.config.jsファイルに以下を追加するソリューションがインターネット上に浮かんでいます。

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

私たちの例では、このソリューションは問題を解決しません。

プロジェクトの構造は次のとおりです。

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

nightwatch.conf.js 構造は次のようになります。

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
}

私たちのnightwatch_globals.jsファイル（エラーが呼び出されている場所は次のようになります：

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);
  },
};

そして、私たちのbabel.config.jsファイルは次のとおりです。


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
  };
};

ターミナルで実行するクライアントディレクトリからnode nightwatch.conf.js ; nightwatch

ここに永続的なエラーがあります

/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)

私の直感では、インポート トークンが認識されない理由は、Babel 7 がコードのコンパイルをprocess.cwd(). ご覧のとおり、エラーは API から発生しています。nightwatch は client ディレクトリのパッケージであるため、Babel は api ディレクトリをコンパイルしていません (これはまだ Babel 6 にあります)。ただし、クライアント テスト スイート全体を API ファイルから独立させるためにリファクタリングする必要は避けたいと考えています。

解決策は@babel/register、クライアント側から API をコンパイルする方法を見つけることだと思いますが、このようなことを行う方法がわかりません。

4

0 に答える 0