Jak skonfigurować Jasmine w Rails 6?

9

Jak skonfigurować Jasmine w środowisku Rails 6 (gdzie Webpack zastępuje potok zasobów dla Javascript), aby móc testować moduły JavaScript, które napisałem dla mojej aplikacji?

Zainstalowałem klejnot jaśminu, uruchomiłem rails generate jasmine:installi zredagowałem, jasmine.ymlaby wskazać lokalizację mojego źródła Javascript i specyfikacji.

Problem polega na tym, że nie mogę użyć instrukcji importu / eksportu. (Na przykład, starając się załadować mój pierwszy moduł do wyników badań w tym błędów w Chrome: Uncaught SyntaxError: Unexpected token 'export')

Z tego, co mogę powiedzieć, muszę skonfigurować Jasmine, aby używała babel; ale nie mam szczęścia znaleźć instrukcji, jak to zrobić w nowym układzie Rails 6.

Zack
źródło
Hej Zack, @Dofs, czy miałeś okazję rzucić okiem na moją odpowiedź? Czy to ci wystarcza, czy powinienem pomóc / zbadać głębiej?
Sergey Mell,
Jeszcze nie. Styczeń i luty to najbardziej pracowite pory roku dla mojej regularnej pracy. Dam ci znać jak najszybciej.
Zack

Odpowiedzi:

5

Tak, masz rację. Głównym problemem jasmine-gemjest to, że nie przepuszcza specyfikacji przez babel. Pozwól, że opublikuję najszybsze rozwiązanie twojego problemu, a następnie pomyślę o możliwym wdrożeniu podobnego podejścia w jasmine-gem.

Główną ideą jest przepuszczanie specyfikacji przez pakiet WWW szyn, o ile ma on wszystkie wymagane konfiguracje babel.

  1. Zainstaluj, jasmine-coreponieważ nie będziemy używać jasmine-gemw tym rozwiązaniu
    yarn add jasmine-core -D
  2. Teraz utwórz dwa dodatkowe pakiety webpacka. Jeden jest dla Jasmine i będzie zawierał tylko Jasmine i biegacza testowego

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

    I drugi dla kodu aplikacji i specyfikacji

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

    Zwróć uwagę na swoje '../javascripts'i '../spec'ścieżki. Dla mnie to wyglądało '../../assets/javascripts'i '../../../spec'szanowało.

  3. Następnie dodaj Webpack ProvidePlugin dla Jasmine (dodaj ten kod do 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',
    }))
  4. Dodaj stronę Jasmine Runner do swojej aplikacji

    # 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>
  5. Teraz twój Jasmine powinien działać na /jasminetrasie

Ta odpowiedź została przygotowana na podstawie tego postu , jednak ponownie sprawdziłem instrukcje w ruby ​​2.6.3, szynach 6.0.2, dodałem odpowiednie zmiany do rekomendacji i udowodniłem, że to działa.

Daj mi znać, jeśli moja odpowiedź była dla Ciebie pomocna lub potrzebujesz dodatkowych informacji. Będę jednak pracował nad rozwiązaniem, które odniesie sukces w przypadku jasmineklejnotów lub podobnej implementacji.

Sergey Mell
źródło
Czy mogę prosić o przetestowanie czegoś? Postępowałem zgodnie z tymi instrukcjami, jaśmin działa, ale nagle bootstrap.min.jsgeneruje błąd, który w zasadzie oznacza, jqueryże nie był wcześniej ładowany bootstrap. Jednak] Nie mogę znaleźć, co w tym kodzie zmienia kolejność ładowania JS ... zwłaszcza, że ​​mój bootstrap jest ładowany przez CDN w układzie aplikacji po javascript_pack_tag 'application'linii i mój application.jsjuż ma require('jquery'). Jeśli masz tę konfigurację w środowisku lokalnym, czy możesz załadować bootstrap za pośrednictwem CDN w układzie aplikacji i sprawdzić, czy działa?
James
Rozgryzłem to. W kroku 3 zastąpiono kod, który dodał wtyczkę jquery. Ta odpowiedź to naprawiła: stackoverflow.com/questions/51447443/…
James