ruby-on-rails - 使用 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 的许多人来说非常有帮助。

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

一些有用的资源:

https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.g6p5go9gd

http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c

http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/

https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack

Answer 1

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

这个答案是一个两部分。首先，我将解释我是如何在流血、汗水和泪水之后到达我当前的 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 将在被转译的文件的当前目录中查找 .babelrc。如果一个不存在，它将沿着目录树向上移动，直到找到 .babelrc 或带有“babel”的 package.json: {} 内的哈希值。”

Babel 寻找预设的方式也很脆弱。您会注意到 the babel-handbook documentation for creating presets包括步骤“只需将其发布到 npm，您就可以像使用任何预设一样使用它”。如果您希望 Babel 以传统方式真正找到预设，除了在 node_modules 中使用 npm 包之外别无选择。名称以 babel-preset 开头的目录.

这意味着我们需要创建一个 .babelrc Rails 根目录中的文件，然后使用我们需要的每个插件的完整路径，相对于 .babelrc文件，而不是您过去使用过 Babel 时熟悉的简写(例如 "presets": ["react"] 指的是 node_modules/babel-preset-react )。我的 .babelrc ，遵循 using Webpack 2 上的 Jest 文档和 using 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 的说法，将这些东西按惯例放在项目根目录中并不是“在 Rails 应用程序中使用以应用程序为中心的 JS 的美妙方式”。你可以看到关于实现这个 here 的提交的讨论。 .用户 lemonmade's comment这个提交预示着我们目前的挫折:“它会使任何 JavaScript 工具的实际配置变得极其困难，并导致它的行为与使用 npm 包的任何其他项目不同。”

在下线，DHH 说“感谢您的意见，并在我们前进的过程中将其保留在建议之下。这不是一成不变的，但现在我们将努力使这项工作发挥作用。”在我看来，这是站不住脚的，希望 Rails 团队能够在 5.1 发布之前意识到这一点。目前有 very promising pull request在 webpacker 项目中解决这个问题。让我们希望它得到一些牵引力!