如何在 Rails6 中配置 Jasmine？

Question

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

我安装了 jasmine gem、运行 rails generate jasmine:install，并编辑了 jasmine.yml 以指向我的 Javascript 来源和规范的位置。

问题是我不能使用 import/export 语句。（例如，尝试加载我的第一个模块来测试 Chrome 中的错误结果：Uncaught SyntaxError: Unexpected token 'export'）

据我所知，我需要设置 Jasmine 才能使用 babel；但是，我没有找到关于如何在新的 Rails 6 布局中执行此操作的说明。

Answer 1

Yes, you're right. The main problem of jasmine-gem is that it doesn't pipe the spec through babel. Let me post the quickest solution to your problem and after that, I will think of the possible implementation of a similar approach in jasmine-gem.

The main idea is to pipe the specs through the rails webpack as long as it has all the required babel configurations.

Install jasmine-core since we will not use jasmine-gem in this solution
```
yarn add jasmine-core -D
```

Now create two additional webpack packs. One is for Jasmine and will contain only Jasmine and the test runner

// 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'

And the second one for your application code and the specs

// 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) }

Pay attention to your '../javascripts' and '../spec' paths. For me it looked like '../../assets/javascripts' and '../../../spec' respectevly.

Then add the Webpack ProvidePlugin for Jasmine (add this code to 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',
}))

Add Jasmine ranner page to your application

# 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>

Now your Jasmine should work on /jasmine route

This answer is prepared on the basis of this post, however, I've rechecked the instructions on ruby 2.6.3, rails 6.0.2, added appropriate changes to the recommendations and prove that this works.

Please, let me know if my answer was helpful for you or you need some additional information. However, I'm going to work on a solution that will succeed with jasmine gem or similar implementation.

如何在 Rails6 中配置 Jasmine？

How to configure Jasmine in Rails 6?

ruby-on-rails

jasmine

babeljs

es6-modules

ruby-on-rails-6