¿Cómo configurar Jasmine en Rails 6?

¿Cómo configuro Jasmine en el entorno Rails 6 (donde Webpack reemplaza la canalización de activos para Javascript) para poder probar los módulos Javascript que he escrito para mi aplicación?

Instalé la gema de jazmín, ejecuté rails generate jasmine:instally edité jasmine.ymlpara señalar la ubicación de mi fuente y especificaciones de Javascript.

El problema es que no puedo usar declaraciones de importación / exportación. (Por ejemplo, intentar cargar mi primera módulo a resultados de la prueba en este error en Chrome: Uncaught SyntaxError: Unexpected token 'export')

Por lo que puedo decir, necesito configurar Jasmine para usar babel; pero no tengo suerte de encontrar instrucciones sobre cómo hacer esto en el nuevo diseño de Rails 6.

— Zack
fuente

Hola Zack, @Dofs, ¿tuviste la oportunidad de ver mi respuesta? ¿Es suficiente para ti o debo ayudar / investigar más a fondo?

— Sergey Mell

Aún no. Enero y febrero son las épocas más ocupadas del año para mi trabajo habitual. Te lo haré saber tan pronto como pueda.

— Zack

Sí tienes razón. El principal problema jasmine-gemes que no canaliza la especificación a través de babel. Permítanme publicar la solución más rápida a su problema y después de eso, pensaré en la posible implementación de un enfoque similar en jasmine-gem.

La idea principal es canalizar las especificaciones a través del paquete web de rieles siempre que tenga todas las configuraciones de babel requeridas.

Instalar jasmine-coreya que no usaremos jasmine-gemen esta solución
```
yarn add jasmine-core -D
```

Ahora cree dos paquetes de paquetes web adicionales. Uno es para Jasmine y contendrá solo Jasmine y el corredor de prueba

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

Y el segundo para su código de aplicación y las especificaciones

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

Presta atención a tus '../javascripts'y '../spec'caminos. Para mí, parecía '../../assets/javascripts'y '../../../spec'respetuosamente.

Luego agregue el Webpack ProvidePlugin para Jasmine (agregue este código a 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',
}))

Agregue la página de Jasmine Ranner a su aplicación

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

Ahora tu jazmín debería funcionar en la /jasmineruta

Esta respuesta se prepara sobre la base de esta publicación , sin embargo, volví a verificar las instrucciones en ruby 2.6.3, rails 6.0.2, agregué los cambios apropiados a las recomendaciones y comprobé que esto funciona.

Por favor, avíseme si mi respuesta fue útil para usted o si necesita información adicional. Sin embargo, voy a trabajar en una solución que tenga éxito con jasminegem o implementación similar.

— Sergey Mell
fuente

¿Puedo pedirte que pruebes algo? Seguí estas instrucciones, Jasmine está funcionando, pero de repente bootstrap.min.jsestá arrojando un error que básicamente significa jqueryque no se está cargando antes bootstrap. Sin embargo,] No puedo encontrar lo que en este código cambia el orden de carga de JS ... especialmente porque mi bootstrap se está cargando a través de CDN en el diseño de la aplicación después de la javascript_pack_tag 'application'línea y application.jsya tiene un require('jquery'). Si tiene esta configuración en un entorno local, ¿puede cargar bootstrap a través de CDN en el diseño de la aplicación y ver si funciona?

— James

Me lo imaginé. El paso 3 anulaba el código que agregaba el complemento jquery. Esta respuesta lo solucionó: stackoverflow.com/questions/51447443/…

— james