При переключении на babel 7 шутка показывает «неожиданный токен»

Question

Я борюсь с этой ошибкой jest и не знаю, как ее исправить. В основном я выполнил следующие команды для переключения на новый babel 7:

npx babel-upgrade --write --install
npm install --save-dev @babel/preset-react
npm install babel-polyfill

Вот мой package.json, где указаны все конфиги (нет .babelrc, нет jest.config.js):

{
  "name": "seqr",
  "version": "0.2.0",
  "homepage": "",
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.8.3",
    "@babel/runtime-corejs2": "^7.0.0",
    "autoprefixer": "7.1.6",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-preset-react-app": "^3.1.2",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "chalk": "2.3.0",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "3.2.2",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.0",
    "eslint-plugin-react": "^7.10.0",
    "eslint-plugin-react-perf": "^2.0.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "^4.0.3",
    "html-webpack-plugin": "2.30.1",
    "jest": "^23.6.0",
    "natives": "^1.1.6",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.9",
    "promise": "8.0.1",
    "purify-css": "^1.2.6",
    "purifycss-webpack": "^0.7.0",
    "react-error-overlay": "^3.0.0",
    "react-test-renderer": "16.2.0",
    "redux-mock-store": "^1.5.3",
    "style-loader": "0.19.0",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^17.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "^3.8.1",
    "webpack-cleanup-plugin": "0.5.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "optionalDependencies": {
    "fsevents": "^1.1.3"
  },
  "dependencies": {
    "ajv": "^5.5.2",
    "babel-polyfill": "^6.26.0",
    "detect-port": "^1.2.3",
    "draft-js": "^0.10.4",
    "draftjs-md-converter": "^0.1.6",
    "filesize": "3.5.11",
    "glob": "^7.1.2",
    "gtex-d3": "github:broadinstitute/gtex-viz#8d65862",
    "gzip-size": "4.1.0",
    "igv": "^2.2.2",
    "jquery": "3.2.1",
    "lodash": "^4.17.11",
    "object-hash": "^1.3.0",
    "prop-types": "15.6.0",
    "query-string": "^6.1.0",
    "random-material-color": "1.0.3",
    "react": "^16.2.0",
    "react-addons-shallow-compare": "15.6.2",
    "react-dev-utils": "^4.2.2",
    "react-document-title": "2.0.3",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-markdown-renderer": "^1.4.0",
    "react-rangeslider": "^2.2.0",
    "react-redux": "5.0.6",
    "react-render-visualizer-decorator": "0.4.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "react-virtualized": "^9.9.0",
    "react-xhr-uploader": "^0.4.4",
    "recursive-readdir": "2.2.1",
    "redux": "^3.7.2",
    "redux-form": "^7.3.0",
    "redux-thunk": "2.2.0",
    "request": "^2.88.0",
    "reselect": "3.0.1",
    "semantic-ui": "2.2.12",
    "semantic-ui-react": "^0.80.0",
    "slugify": "1.2.6",
    "styled-components": "^2.2.3",
    "timeago.js": "3.0.2",
    "timeout-as-promise": "1.0.0",
    "typescript": "^2.9.2",
    "why-did-you-update": "^0.1.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "testMatch": [
      "<rootDir>/**/?*.(test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "<rootDir>[/\\\\]node_modules[/\\\\](?!(igv|gtex-d3)/).+\\.(js|jsx|ts|tsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "env": {
      "test": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs"
        ]
      }
    },
    "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-proposal-class-properties",
      [
        "babel-plugin-styled-components",
        {
          "displayName": true
        }
      ],
      [
        "babel-plugin-module-resolver",
        {
          "root": [
            "./"
          ],
          "extensions": [
            ".js",
            ".jsx",
            ".css"
          ],
          "alias": {
            "shared": "./shared/",
            "pages": "./pages/",
            "gtex-d3": "./node_modules/gtex-d3/"
          }
        }
      ]
    ],
    "presets": [
      "@babel/preset-react",
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ]
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/macarthur-lab/seqr.git"
  },
  "license": "AGPL-3.0"
}

Я обновился до webpack 4, так как до этого у меня была версия 3, как было предложено в теме:

Babel 7 Неожиданный токен для компонента React

Но это не помогло.

Тестирование запускается с использованием указанного в package.json сценария scripts/test.js, который выглядит следующим образом:

'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const jest = require('jest');
const argv = process.argv.slice(2);

// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
  argv.push('--watch');
}


jest.run(argv);

И ../config/env.js Файл имеет следующий вид:

'use strict';

const fs = require('fs');
const path = require('path');
const paths = require('./paths');

// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}

// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
  paths.dotenv,
].filter(Boolean);

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv').config({
      path: dotenvFile,
    });
  }
});

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
  .split(path.delimiter)
  .filter(folder => folder && !path.isAbsolute(folder))
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter);

console.log('NODE_PATH: ', process.env.NODE_PATH)

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}

module.exports = getClientEnvironment;

Текущий запуск npm run test вызывает следующую ошибку:

Jest обнаружил неожиданный импорт токена {json} из 'd3-fetch'; ^

>SyntaxError: Unexpected token {

Я много чего перепробовал. Вот еще одна важная тема, которая, к сожалению, не помогла мне:

babel@7 и настройка jest

Ошибка происходит в node_modules, как здесь:

https://github.com/facebook/jest/issues/6229

Любые предложения будут с благодарностью.

Обновление

Попытка изменить test объект в package.json конфигурации на следующий:

 "env": {
      "test": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],  
        "plugins": [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-modules-commonjs",
          "babel-plugin-dynamic-import-node"
        ]   
      }   
    },  

Но не повезло

Обновление

Попытка создать отдельный babel.config.js и перенести в него настройки из package.json, но все равно не удалась:

module.exports = {    
  "env": {
      "test": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-syntax-dynamic-import"
        ]
      }
    },
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-transform-regenerator",
      "@babel/plugin-syntax-dynamic-import",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-proposal-class-properties",
      [
        "babel-plugin-styled-components",
        {
          "displayName": true
        }
      ],
      [
        "babel-plugin-module-resolver",
        {
          "root": [
            "./"
          ],
          "extensions": [
            ".js",
            ".jsx",
            ".css"
          ],
          "alias": {
            "shared": "./shared/",
            "pages": "./pages/",
            "gtex-d3": "./node_modules/gtex-d3/"
          }
        }
      ]
    ],
    "presets": [
      "@babel/preset-react",
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ]
    ]
}

Обновление

Наконец добавление babel-plugin-dynamic-import-node исправило проблему с тестированием, однако я получил новую ошибку:

[eslint-import-resolver-babel-module] Ошибка типа: не удается прочитать свойство 'find' из неопределенного

Обновление Обновление модуля eslint-import-resolver-babel-module до последней версии устранило проблему, но вышло другое:

./node_modules/draftjs-md-converter/dist/index.js
Syntax error: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/draftjs-md-converter/dist/index.js: Identifier '_toConsumableArray' has already been declared (195:9)

  193 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  194 | 
> 195 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
      |          ^
  196 | 
  197 | var parse = require('markdown-to-ast').parse;
  198 | 
    at parser.next (<anonymous>)