如何在Rails6中配置Jasmine

如何在Rails 6环境中配置Jasmine(Webpack取代了Javascript的资产管道(，以便测试我为应用程序编写的Javascript模块？

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

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

据我所知，我需要设置Jasmine使用babel；但是，我在新的Rails6布局中找不到关于如何做到这一点的说明。

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

其主要思想是通过rails webpack传输规范，只要它具有所有所需的babel配置。

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

现在创建另外两个webpack包。一个是Jasmine，将只包含Jasmine和测试运行

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

然后添加Jasmine的Webpack ProviderPlugin(将此代码添加到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或类似的实现获得成功。

相关内容

最新更新

热门标签：