使用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的人来说非常有帮助.

感谢您对该主题的任何想法,
Jo

一些有用的资源:

1. https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.g6p5go9gd
2. http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c
3. http://nicolasgallagher.com/how-to-test-react-components-karma-webpack/
4. https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack

Answer 1

注意:由于Rails团队默认情况下已将JavaScript依赖项移回项目的根目录,因此不再需要我回答此问题的过程.

这个答案是两个部分.首先,我将解释在经过多少血,汗水和眼泪之后,我到达了目前的Webpacker + React + Jest测试环境.其次,我将深入研究为什么所有的体液消耗.

第1部分:实施

1. 轨.我生成了一个新的Rails应用程序,跳过了我不太可能需要的所有内容.

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

2. 在Rails 5.1发布之前,我们需要Webpacker.

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

   然后在你的shell中

   $ bundle install
   

3. 使用Webpacker设置Webpack和React

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

4. 安装Jest和Jest相关的包

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

5. 配置Jest以与Webpacker一起玩得很好.这篇关于为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"
     ]
   }
   

6. 巴贝尔.这一次让我头疼.Babel不支持动态配置(尽管目前正在考虑中).此外,Babel寻找配置的方式对我们没有帮助."Babel将在正在编译的文件的当前目录中查找.babelrc.如果不存在,它将沿目录树向上移动,直到找到.babelrc或带有"babel"的package.json: {}哈希."

   Babel寻找预设的方式也很脆弱.您会注意到,用于创建预设的babel-handbook文档包括"简单地将其发布到npm并且您可以像使用任何预设一样使用它"的步骤.如果你想让Babel以传统的方式实际找到一个预设,除了node_modules在名称以...开头的目录中使用npm包之外别无选择babel-preset.

   这意味着我们需要.babelrc在Rails根目录中创建一个文件,然后使用相对于该.babelrc文件所需的每个插件的完整路径,而不是如果你使用过的那么你会熟悉的简写过去的通天(例如"presets": ["react"]指node_modules/babel-preset-react).我的.babelrc,关于使用Webpack 2和使用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"
         ]
       }
     }
   }
   

   删除配置options下的密钥babel-loader,config/webpack/shared.js以便Webpack也使用此配置文件.

这让我们到了现在.我在Jest文档中实现了基本求和(vanilla JS)和Link(React)测试,并通过npm run test在/vendor目录中执行来运行它们.你可以在这里看到我工作的成果:https://github.com/pstjean/webpacker-jest

第2部分.为什么

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

移动我们所有Yarn和Webpack文件的原始理由/vendor是,根据DHH的说法,在项目根目录中具有这些东西并不是"在Rails应用程序中共享以应用程序为中心的JS的一种美妙方式".您可以在此处查看有关实现此提交的提交的讨论.用户lemonmade对此提交的评论预示着我们当前的挫折:"它将使实际配置任何JavaScript工具变得非常困难,并使其行为与使用npm包的任何其他项目中的行为不同."

DH先生表示,"我们向前推进,并将继续提供建议.这不是一成不变的,但现在我们将努力做到这一点." 在我看来,这不是站得住脚的,希望Rails团队能够在5.1启动之前意识到这一点在核心.目前有一个非常有希望的拉取请求来解决webpacker项目中的这个问题.让我们希望它有所吸引力!