Ответ 1

ПРИМЕЧАНИЕ. Процесс, который я прошел, чтобы ответить на этот вопрос, больше не нужен, так как команда Rails перенесла зависимостей JavaScript назад в корне проекта по умолчанию.

Этот ответ является двухпатровым. Во-первых, я объясню, как после много крови, пота и слез, я пришел в свою текущую среду тестирования Webpacker + React + Jest. Во-вторых, я буду погружаться в то, почему все расходы на телесные жидкости.

Часть 1: Реализация

• Rails. Я создал новое приложение Rails, пропустив все, что мне вряд ли понадобится.

  rails new rails-react --skip-action-mailer --skip-active-record --skip-action-cable --skip-javascript --skip-turbolinks
  

• Пока Rails 5.1 не отправляется, нам нужен Webpacker.

  # Gemfile
  gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
  

  Затем в вашей оболочке

  $ bundle install
  

• Настройка Webpack и React с помощью Webpacker

  $ rails webpacker:install && rails webpacker:install:react
  

• Установить пакеты Jest и Jest

  $ bin/yarn add jest babel-jest babel-polyfill react-test-renderer --dev
  

• Настройте Jest, чтобы хорошо играть с Webpacker. Эта статья о настройке Jest для Webpack очень полезна. Согласно документам "<rootDir> - это специальный токен, который заменяется Jest корнем вашего проекта. В большинстве случаев это будет папка, в которой находится ваш package.json". Реально для нас это /vendor, а не /, как это было бы в обычном проекте JavaScript.

  // vendor/package.json
  "jest": {
    // The name of this directive will soon change to "roots"
    // https://github.com/facebook/jest/issues/2600
    // This points Jest at Webpacker default JS source directory
    "testPathDirs": [
      "<rootDir>/../app/javascript/packs"
    ],
    // This ensures that node_modules are resolved properly
    // By default, Jest looks in "/" for this, not "vendor/"
    "moduleDirectories": [
      "<rootDir>/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ]
  }
  

• Бабель. Это вызвало у меня большую головную боль. Babel не поддерживает динамическую конфигурацию (хотя в настоящее время рассматривается ). Кроме того, то, как Babel ищет конфигурацию, не помогает нам. "Babel будет искать .babelrc в текущем каталоге передаваемого файла. Если он не существует, он будет перемещаться по дереву каталогов, пока не найдет .babelrc или package.json с" babel ": {} хэш внутри."

  То, как Вавилон ищет пресеты, также хрупкий. Вы заметите, что документация по бабелю для создания пресетов включает в себя шаг "просто опубликуйте это до npm, и вы можете использовать его так, как если бы вы запрограммированный". Если вы хотите, чтобы Babel действительно находил предустановку обычным способом, нет альтернативы использованию пакета npm внутри каталога node_modules с именем, начинающимся с babel-preset.

  Это означает, что нам нужно создать файл .babelrc в корне Rails, а затем использовать полный путь к каждому плагину, который нам нужен, относительно этого файла .babelrc, а не короткую руку, Если вы использовали Babel в прошлом (например, "presets": ["react"] относится к node_modules/babel-preset-react). Мой .babelrc, следуя документам Jest на с использованием Webpack 2 и с использованием babel выглядит следующим образом:

  // .babelrc
  {
    "presets": [
      "./vendor/node_modules/babel-preset-react",
      "./vendor/node_modules/babel-preset-es2015"
    ],
    "env": {
      "test": {
        "plugins": [
          "./vendor/node_modules/babel-plugin-transform-es2015-modules-commonjs"
        ]
      }
    }
  }
  

  Удалите ключ options в конфигурации babel-loader в config/webpack/shared.js, чтобы Webpack также использовал этот файл конфигурации.

Это подводит нас к настоящему моменту. Я применил тесты базовой суммы (vanilla JS) и Link (React) в документах Jest и запустил их, выполнив npm run test в /vendor. Здесь вы можете увидеть плоды моих трудов: https://github.com/pstjean/webpacker-jest

Часть 2. Почему?

Это нелегко сделать прямо сейчас. Должен быть. Корнем наших проблем является нетрадиционная структура каталогов, навязанная Webpacker.

Первоначальная причина перемещения всех наших файлов Yarn и Webpack в разделе /vendor заключается в том, что, согласно DHH, наличие этих вещей в корне проекта, как и в случае с конвенцией, не является "прекрасным способом совместного использования ориентированного на приложения JS в пределах Rails". Вы можете увидеть обсуждение коммита, реализующего этот здесь. Пользователь комментарий lemonmade в этом коммите предвосхищает наши текущие разочарования: "Это сделает очень сложную настройку любого инструментария JavaScript и заставит его вести себя по-другому, чем это будет в любом другом проекте, который использует пакеты npm."

Downthread, DHH говорит: "Цените ввод и будете держать его под советом по мере продвижения вперед. Это не задано в камне, но пока мы попытаемся сделать эту работу". На мой взгляд, это не поддается сомнению, и, надеюсь, команда Rails поймет, что до того, как 5.1 запускается с этим в основном. В настоящее время существует очень перспективный запрос на перенос, чтобы устранить эту проблему в проекте webpacker. Пусть надеется, что он получит некоторую тягу!