我已将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
我已经安装了反应并编写了一个小组件：
app/javascript/discover/example.jsx
现在我在如何设置工作测试环境方面遇到了困难。通常我会说通常的测试设置应包括：karma，jasmine或mocha，webpack。
配置文件应该在哪里？将存储测试文件的位置，并构建karma.config.js以将所有内容捆绑在一起。
如果有一个示例应用程序可以显示如何正确地执行所有操作，那将会很棒，但我显然缺乏将所有内容正确插入的必要技能。
这不是一个容易回答的问题，但拥有这样的示例应用程序对于很多想要在将来使用webpacker的人来说非常有帮助。
感谢您对该主题的任何想法，
乔
一些有用的资源：
答案 0 :(得分：10)
注意：我不再需要通过回答此问题的流程，因为Rails团队默认拥有项目的moved JavaScript dependencies back into the root。
这个答案是两个部分。首先，我将解释在经过多少血，汗水和眼泪之后，我到达了目前的Webpacker + React + Jest测试环境。其次，我将深入研究为什么所有的体液消耗。
导轨。我生成了一个新的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。配置Jest for Webpack的This article非常有用。根据文档＆＃34; <rootDir>是一个特殊标记，由Jest替换为项目的根。大多数情况下，这将是package.json所在的文件夹＆＃34;。对我们来说至关重要的是/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寻找配置的方式对我们没有帮助。 ＆＃34; Babel会在正在编译的文件的当前目录中查找.babelrc。如果一个不存在，它将沿目录树向上移动，直到找到.babelrc或带有＆＃34; babel＆＃34;：{}哈希的package.json。＆＃34;
Babel寻找预设的方式也很脆弱。您会注意到the babel-handbook documentation for creating presets包含步骤＆＃34;只需将其发布到npm，您就可以像使用任何预设一样使用它了＃34;。如果您希望Babel以传统方式实际找到预设，则无法在node_modules目录中使用名称以babel-preset开头的npm包。
这意味着我们需要在Rails根目录中创建一个.babelrc文件，然后使用相对于.babelrc文件所需的每个插件的完整路径，而不是短文件如果您过去曾使用过Babel（例如"presets": ["react"]指的是node_modules/babel-preset-react），那么您就会熟悉它。关于using Webpack 2和using babel上的Jest文档，我的.babelrc如下所示：
// .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也使用此配置文件。
这将我们带到了现在。我在Jest文档中实现了基本求和（vanilla JS）和Link（React）测试，并通过在npm run test目录中执行/vendor来运行它们。你可以在这里看到我工作的成果：https://github.com/pstjean/webpacker-jest
现在这不是一件容易的事。它应该是。我们问题的根源是Webpacker强加的非常规目录结构。
根据DHH，在/vendor下移动所有Yarn和Webpack文件的原始原因是，在项目根目录中具有这些内容并不是＆＃34;一种美观的方式来共享应用程序 - 在Rails应用程序中聚焦JS＆＃34;。您可以看到有关实现此here的提交的讨论。此提交中的用户lemonmade's comment预示着我们当前的挫败感：＆＃34;它将使实际配置任何JavaScript工具极其困难，并使其行为与使用npm包的任何其他项目中的行为不同。＆＃34 ;