如何在Rails 6中配置Jasmine？

如何在Rails 6环境（Webpack替换Java的资产管道）中配置Jasmine，以便可以测试为应用程序编写的Javascript模块？

我安装了茉莉花宝石ran rails generate jasmine:install并进行了编辑，jasmine.yml以指向我的Javascript源和规范的位置。

问题是我不能使用导入/导出语句。（例如，试图加载我的第一模块向测试结果在此错误在Chrome： Uncaught SyntaxError: Unexpected token 'export'）

据我所知，我需要设置茉莉花来使用babel。但是，我在新的Rails 6布局中找不到如何执行此操作的说明。

— 扎克
source

嘿Zack，@ Dofs，您有机会看看我的回答吗？这对您来说足够了还是我应该更深入地帮助/调查？

— 谢尔盖·梅尔

还没。一月和二月是一年中我最忙的时间。我会尽快通知您。

— 扎克

你是对的。主要的问题jasmine-gem是它不会通过babel传递规范。让我发布针对您的问题的最快解决方案，然后，我将考虑在中实现类似方法的可能jasmine-gem。

主要思想是通过规格web包传递规范，只要它具有所有必需的babel配置即可。

安装，jasmine-core因为我们将不在jasmine-gem此解决方案中使用
```
yarn add jasmine-core -D
```

现在创建两个附加的webpack包。一个用于茉莉花，仅包含茉莉花和测试运行器

// app/javascript/packs/jasmine.js

import 'jasmine-core/lib/jasmine-core/jasmine.css'
import 'jasmine-core/lib/jasmine-core/jasmine-html.js'
import 'jasmine-core/lib/jasmine-core/boot.js'
import 'jasmine-core/images/jasmine_favicon.png'

第二个用于您的应用程序代码和规范

// app/javascript/packs/specs.js

// First load your regular JavaScript (copy all the JavaScript imports from your main pack).
let webpackContext = require.context('../javascripts', true, /\.js(\.erb)?$/)
for(let key of webpackContext.keys()) { webpackContext(key) }

// Then load the specs
let specsContext = require.context('../spec', true, /\.js(\.erb)?$/)
for(let key of specsContext.keys()) { specsContext(key) }

注意您的'../javascripts'和'../spec'路径。对我来说，它看起来像'../../assets/javascripts'和'../../../spec'respectevly。

然后为Jasmine添加Webpack ProvidePlugin（将此代码添加到config/webpack/environment.js）

// config/webpack/environment.js

const webpack = require('webpack')

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
   jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js',
}))

将Jasmine ranner页面添加到您的应用程序

# config/routes.rb

Rails.application.routes.draw do
  # ...

  if Rails.env.development? || Rails.env.test?
    get 'jasmine', to: 'jasmine#index'
  end
end

# app/controllers/jasmine_controller.rb

class JasmineController < ApplicationController
  layout false

  def index
  end
end

# app/views/jasmine/index.html.haml

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <%= stylesheet_pack_tag 'jasmine', :media => 'all' %>
</head>
<body>
  <%= javascript_pack_tag 'jasmine' %>
  <%= javascript_pack_tag 'specs' %>
</body>
</html>

现在您的茉莉花应该在/jasmine路线上工作

这个答案是基于这篇文章准备的，但是，我已经重新检查了关于ruby 2.6.3，rails 6.0.2的说明，对建议进行了适当的更改，并证明了它的有效性。

请让我知道我的答案是否对您有帮助，或者您需要其他信息。但是，我将研究一个可以在jasminegem或类似实现中成功的解决方案。

— 谢尔盖·梅尔
source

我可以请您测试一下吗？我遵循了这些说明，茉莉花正在工作，但是突然bootstrap.min.js抛出一个错误，该错误基本上意味着jquery之前没有被加载bootstrap。但是，]我找不到这段代码中的内容会更改JS的加载顺序...，尤其是因为我的引导程序是通过CDN javascript_pack_tag 'application'在行后的应用程序布局中加载的，并且我application.js已经有了require('jquery')。如果您在本地环境中进行了此设置，是否可以通过CDN在应用程序布局中加载引导程序，并查看其是否有效？

— 詹姆斯

我想到了。第3步是重写添加了jquery插件的代码。这个答案固定它：stackoverflow.com/questions/51447443/...

— 詹姆斯