Cómo configurar las pruebas de JavaScript en Rails 5.1 con Webpacker y Jest

Rails 5.1 se envía con Webpacker, que permite a los dinosaurios como yo meterse tibiamente en el zumbido de alquitrán de JavaScript, err, ECMAScript, que los milenarios están nadando en estos días.

Parece que no hay mucha documentación sobre cómo configurar las pruebas con Webpacker, así que pensé en hacer una crónica de cómo logré hacer que finalmente funcione. Decidí probar Jest sin ninguna razón en particular, a pesar de que (¡jadeo!) No estoy usando React.

Descargo de responsabilidad: definitivamente soy un novato cuando se trata de estas cosas. Todo se siente un poco como una máquina Rube Goldberg construida a partir de JSON y dotfiles. Así que no me sorprenderé (ni ofenderé) cuando la gente me diga que hay una mejor manera de lograr algo que he descrito aquí. De hecho, me encantaría saber cómo se podría mejorar esta configuración.

1. Instalar Jest

Primero, instale Jest ejecutando esto desde la raíz de su proyecto Rails.

hilo agregar --dev jest

Una práctica común es configurar un script que ejecute sus comandos de prueba. Agregue esto a su archivo package.json:

"guiones": {
  "prueba": "broma"
},

y podrás ejecutar tus pruebas con la prueba de hilo. Por supuesto, en este punto, simplemente podrías hacer bromas de hilo, pero eso es una tontería. Por qué harías eso.

2. Dile a Jest dónde encontrar tus exámenes

Una cosa que es agradable de Jest es cuán agresivamente busca archivos de prueba en su proyecto. Por ejemplo, Jest ejecutará todos los archivos que coincidan con * .spec.js o * .test.js en su proyecto ... lo que significa que config / webpack / test.js se ejecutará como una prueba, haciendo que Jest informe un error.

Mi cerebro con TOC no puede manejar este tipo de emparejamiento suelto, así que utilicé la opción de configuración de raíces para decirle a Jest que ejecute solo los archivos de prueba que se encuentran en el directorio spec / javascript. Si eres como yo, agrega esto a package.json:

"broma": {
  "raíces": [
    "spec / javascript"
  ]
},

Puede verificar la configuración hasta el momento al insertar un archivo de prueba y ejecutarlo. Cree spec / javascript / sum.spec.js con una prueba simple:

prueba ('1 + 1 es igual a 2', () => {
  esperar (1 + 1) .toBe (2);
});

Ahora, ejecute la prueba de hilo y debería ver una salida verde y sentir esa respuesta pavloviana familiar y satisfactoria que solo TDD puede proporcionar.

Actualización: descubrí que agregar app / javascript a las raíces me permitió usar el indicador --watchAll, que ejecuta pruebas cada vez que cambian los archivos (como Guard). Combine con la bandera --notificar para agregar zen Todavía estoy tratando de descubrir cómo hacer que --watch funcione…

3. Configurar Babel

También estoy usando cosas interesantes como la importación, que no parecía funcionar de forma inmediata. Ejecutar mis especificaciones generó este error:

SyntaxError: importación de token inesperada

Esto me sorprendió: es probable que haya configurado algo mal. Pero finalmente conseguí que Babel funcionara instalando algunos paquetes adicionales:

añadir hilo --dev babel-jest babel-preset-es2015

y agregando el preset "es2015" (en negrita) a mi archivo .babelrc:

{
  "presets": ["es2015",
    ["env", {
      "módulos": falso,
      "objetivos": {
        "navegadores": "> 1%",
        "uglify": verdadero
      },
      "useBuiltIns": verdadero
    }]
  ],
"complementos": [
    "syntax-dynamic-import",
    ["transform-class-properties", {"spec": true}]
  ]
}

4. Dile a Jest dónde viven tus módulos

No me gustó la idea de escribir la ruta completa a mis módulos desde mis especificaciones. La configuración moduleDirectories se puede usar para decirle a Jest dónde buscar módulos, así que lo señalé a mis archivos fuente en app / javascript. Mi configuración de Jest en package.json terminó luciendo así:

"broma": {
  "raíces": [
    "spec / javascript"
  ],
  "moduleDirectories": [
    "node_modules",
    "aplicación / javascript"
  ]
},

Nota: el valor pasado a moduleDirectories anula el valor predeterminado, por lo que también debe incluir el directorio node_modules.

El resultado final es bastante dulce, y coincide mucho con mi configuración RSpec. Por ejemplo, puede tener una aplicación de archivo fuente / javascript / Dinosaur.js:

exportar clase predeterminada Dinosaur {
  get isExtinct () {
    volver verdadero;
  }
}

y un archivo de prueba coincidente spec / javascript / Dinosaur.spec.js:

importar dinosaurio de 'Dinosaurio';
prueba ('Los dinosaurios están extintos', () => {
  esperar ((nuevo Dinosaurio) .isExtinct) .toBeTruthy ();
});

y prueba de hilo Just Works ™

BONUS ROUND: configura el código para ejecutar pruebas de Jest

Utilizo Codeship para una integración continua y pensé que sería ingenioso ejecutar mi suite Jest además de mi suite RSpec. Resulta que fue súper fácil.

Agregué esto a mis comandos de configuración:

nvm install 8.4.0
instalar hilo

Y esto a mis comandos de prueba:

prueba de hilo

Neato

Resumen

Como se mencionó, probablemente he hecho todo esto de una manera indirecta. ¡Me encantaría recibir comentarios o sugerencias de personas que realmente saben lo que están haciendo! Deja un comentario o tuitea @kylefox.