使用 rails/webpacker 反应测试设置

Question

我已将 webpacker 添加到我现有的 rails 应用程序中，一切正常。

Webpack 配置在

下找到

config/webpack/shared.js
config/webpack/development.js
config/webpack/production.js

node_modules安装在

vendor/node_modules

js包文件在

app/javascript/packs/application.js

我已经安装了 React 并写了一个小组件：

app/javascript/discover/example.jsx

现在我为如何设置工作测试环境而苦恼。通常我会说通常的测试设置应该包括：karma、jasmine 或 mocha、webpack.

配置文件应该放在哪里？测试文件将存储在哪里并构建一个 karma.config.js 将所有内容捆绑在一起。

最好有一个示例应用程序来展示如何正确地执行所有这些操作，但我显然缺乏将所有内容正确组合在一起的必要技能。

这不是一个容易回答的问题，但是有这样一个示例应用程序将对很多将来想使用 webpacker 的人非常有帮助。

感谢您对此主题的任何想法，
乔

一些有用的资源：

Answer 1

注意： 我回答这个问题所经历的过程不再是必需的，因为 Rails 团队默认拥有项目的 moved JavaScript dependencies back into the root .

这个答案是two-parter。首先，我将解释我是如何在流血、汗水和泪水之后，到达我当前的 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'

然后在你的 shell

$ bundle install

使用 Webpacker 设置 Webpack 和 React

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

安装 Jest 和 Jest 相关包

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

配置 Jest 以与 Webpacker 配合使用。 This article 关于为 Webpack 配置 Jest 非常有帮助。根据文档“<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's 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 不支持动态配置（虽然是currently being considered）。此外，Babel 查找配置的方式对我们没有帮助。 "Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within."

Babel 查找预设的方式也很脆弱。您会注意到 the babel-handbook documentation for creating presets 包括步骤 "simply publish this to npm and you can use it like you would any preset"。如果你想让 Babel 以传统方式实际找到一个预设，除了在 node_modules 目录中使用名称以 babel-preset.
开头的 npm 包之外别无选择。
这意味着我们需要在 Rails 根目录中创建一个 .babelrc 文件，然后使用我们需要的每个插件的完整路径，相对于那个 .babelrc 文件，而不是如果你过去使用过 Babel 就会熟悉的 short-hand（例如 "presets": ["react"] 指的是 node_modules/babel-preset-react）。我的 .babelrc，遵循 using Webpack 2 and using babel 上的 Jest 文档，如下所示：
```
// .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"
      ]
    }
  }
}
```
去掉config/webpack/shared.js中babel-loader配置下的options键，这样Webpack也使用这个配置文件

这让我们来到了现在。我实现了基本总和（vanilla JS）和 Link (React) tests in the Jest docs and run them by executing npm run test in the /vendor directory. You can see the fruits of my labors here: https://github.com/pstjean/webpacker-jest

第 2 部分。为什么？

现在这不是一件容易的事。它应该是。我们问题的根源是 Webpacker 强加的非常规目录结构。

将我们所有的 Yarn 和 Webpack 文件移动到 /vendor 下的最初原因是，根据 DHH 的说法，按照惯例将这些东西放在项目根目录中并不是 "a beautiful way to cohabit app-focused JS within a Rails app"。您可以看到关于在此提交上实现此 here. User lemonmade's comment 的提交的讨论预示着我们当前的挫败感："It will make actually configuring any JavaScript tooling extremely difficult, and causes it to behave differently than it would in any other project that uses npm packages."

下线，DHH 说 "Appreciate the input and will keep it under advisement as we go forward. This isn't set in stone, but for now we're going to try to make this work." 在我看来，这是站不住脚的，希望 Rails 团队在 5.1 发布之前意识到这一点。目前在 webpacker 项目中有一个 very promising pull request 来解决这个问题。希望它能引起一些关注！

使用 rails/webpacker 反应测试设置

React testing setup with rails/webpacker

ruby

ruby-on-rails

karma-runner

reactjs

karma-jasmine

第 1 部分：实施

第 2 部分。为什么？