babeljs - setup - jest syntaxerror: unexpected token import

babel-jest no maneja ES6 dentro de los módulos

Question

Estoy intentando configurar Jest en un proyecto basado en React que utiliza módulos ES6. Sin embargo, parece que estoy teniendo problemas con los módulos ES6, estoy usando babel-jest y creo que tengo esto configurado correctamente (Jest lo detecta automáticamente).

Parece que Jest no tiene problemas para usar las importaciones de ES6 tan pronto como llega a una declaración de importación dentro de uno de los módulos importados que bloquea. Es como si solo estuviera transpilando el script de prueba inicial y no ninguno de los módulos importados. He intentado varias configuraciones y he intentado buscar en Google sin suerte. Ejecutar pruebas sin ninguna importación funciona bien.

Aquí está el error:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Predications from ''./predications'';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

Aquí están los bits relevantes de configuración:

jest.conf.json

{
  "testRegex": "//test//spec//.*//.js$",
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

Script de prueba

import React from ''react'';
import { mount, shallow } from ''enzyme'';
import Slider from ''react-slick'';
import Carousel from ''../../client/components/carousel/carousel.js''; // test chokes on when I include this module

describe(''carousel component'', () => {
  it(''is a test test case'', () => {
    expect(1 + 2).toEqual(3);
  });
});

Actualizar:

Como se sugirió, he intentado ejecutar la prueba sin jest.conf.js, sin embargo, se necesita testRegex para que Jest encuentre mis pruebas, intenté mover las pruebas al directorio de prueba predeterminado y aún fallan.

Me gustaría aclarar que las pruebas en sí están funcionando bien, el problema parece ser cuando uno de mis módulos importados usa ES6, en mi ejemplo anterior, si no importo mi componente de carrusel, la prueba funciona bien, tan pronto como lo importo. que la prueba se ahoga en la declaración de importación dentro de ese archivo. Parece que los módulos importados no están siendo transpilados.

Actualización # 2

Después de algunas investigaciones, parece que el problema es que Babel no está transpilando ES6 dentro de node_modules. He creado un ejemplo de repositorio para demostrar esto aquí: https://github.com/jamiedust/babel-jest-example

Entiendo que los módulos de terceros deben manejar su propio transpiling, sin embargo, tenemos varios módulos que están alojados en nuestro propio registro de npm y se reutilizan entre proyectos, en estos casos Webpack maneja el transpiling, para las pruebas de Jest que necesitamos Nodo_módulos para ser transpilados por Babel, o una forma de aprovechar nuestro paquete web configurado para hacer esto por nosotros.

Solución

Agregue la siguiente configuración en package.json (o archivo de configuración Jest).

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!test-component).+//.js$"
  ]
}

Answer 1

Me enfrenté al mismo problema (node_module no transpilado por babel-jest), sin poder resolverlo.

En su lugar, finalmente lo logro burlándome de node_module, como se describe aquí https://facebook.github.io/jest/docs/manual-mocks.html

NB: configurar __mocks__ en __mocks__ subcarpetas no funcionó para mí. Así que pasé el simulacro como el segundo parámetro de la función jest.mock() . Algo como :

    jest.mock(''your_node_module'', () => {})

Answer 2

Otra posible causa. Babel ahora ignora su .babelrc dentro de node_modules y usa el proporcionado por la dependencia. Si tienes el control de la dependencia, deberías agregarle un .babelrc y babel usaría esas configuraciones para ello.

Sin embargo, esto puede causar problemas si su dependencia y su proyecto utilizan diferentes versiones o módulos de babel.

Answer 3

Por defecto, cualquier código en node_modules es ignorado por babel-jest , vea la opción de configuración Jest transformIgnorePatterns . También he creado un PR en tu ejemplo de repositorio , para que puedas verlo funcionar.

Si bien esto funciona, he descubierto que es extremadamente lento en aplicaciones reales que tienen muchas dependencias que contienen módulos ES. El código base de Jest tiene un enfoque ligeramente diferente a esto, como se puede encontrar en "dependencias de transformación de babel-jest" (lo siento, no me permite publicar más de 2 URL) . Esto también puede llevar mucho más tiempo en Windows, consulte "Tomar 10 segundos en un repositorio vacío" .

Si está haciendo una prueba de "unidad", la burla es probablemente la mejor manera de hacerlo.

Answer 4

Puede intentar agregar el complemento transform-es2015-modules-commonjs a su archivo de configuración de Babel solo para pruebas. Aquí hay un ejemplo de archivo de configuración que le dice a babel que transfiera los módulos solo cuando esté en un entorno de prueba. Puedes ponerlo debajo de tus presets:

{
  "presets": [
    "react",
    ["es2015", {"modules": false, "loose": true}]
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Puedes leer sobre el plugin aquí:

https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs

Luego, cuando ejecute sus pruebas Jest en la línea de comandos, especifique NODE_ENV = prueba (es posible que deba agregar el indicador --no-cache a la orden la primera vez después de hacer el cambio en la configuración de babel porque Jest almacena la salida de babel, pero después que puedes dejarlo apagado

NODE_ENV=test jest --no-cache

Aprendí sobre este tema en un seminario React por Brian Holt en Frontend Masters. https://frontendmasters.com/courses/