如何在 Rails 6 中配置 Jasmine?

Zac*_*ack 9 ruby-on-rails jasmine babeljs es6-modules ruby-on-rails-6

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

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

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

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

Ser*_*ell 6

你是对的。的主要问题jasmine-gem是它没有通过 babel 传递规范。让我发布您的问题的最快解决方案,然后,我会考虑在jasmine-gem.

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

  1. 安装,jasmine-core因为我们不会jasmine-gem在此解决方案中使用
    yarn add jasmine-core -D
    
    Run Code Online (Sandbox Code Playgroud)
  2. 现在创建两个额外的 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'
    
    Run Code Online (Sandbox Code Playgroud)

    第二个是您的应用程序代码和规格

    // 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) }
    
    Run Code Online (Sandbox Code Playgroud)

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

  3. 然后为 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',
    }))
    
    Run Code Online (Sandbox Code Playgroud)
  4. 将 Jasmine runner 页面添加到您的应用程序

    # config/routes.rb
    
    Rails.application.routes.draw do
      # ...
    
      if Rails.env.development? || Rails.env.test?
        get 'jasmine', to: 'jasmine#index'
      end
    end
    
    Run Code Online (Sandbox Code Playgroud)
    # app/controllers/jasmine_controller.rb
    
    class JasmineController < ApplicationController
      layout false
    
      def index
      end
    end
    
    Run Code Online (Sandbox Code Playgroud)
    # 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>
    
    Run Code Online (Sandbox Code Playgroud)
  5. 现在你的茉莉花应该在/jasmine路线上工作

这个答案是在这篇文章的基础上准备,但是,我已经重新检查了关于 ruby​​ 2.6.3、rails 6.0.2 的说明,对建议添加了适当的更改并证明这是有效的。

如果我的回答对您有帮助,或者您需要一些其他信息,请告诉我。但是,我将研究一个可以通过jasminegem 或类似实现成功的解决方案。