web-dev-qa-db-fra.com

babel-jest ne gère pas ES6 dans les modules

J'essaie de configurer Jest sur un projet basé sur React qui utilise des modules ES6. Cependant, il semble que j'aie des problèmes avec les modules ES6, j'utilise babel-jest et je crois que j'ai cette configuration correctement (Jest le détecte automatiquement).

Jest ne semble pas avoir de problème à utiliser les importations ES6, mais dès qu'il frappe sur une instruction d'importation dans l'un des modules importés qu'il étouffe. C'est comme s'il ne transposait que le script de test initial et aucun des modules importés. J'ai essayé diverses configurations et essayé de rechercher Google sans succès. L'exécution de tests sans aucune importation fonctionne correctement.

Voici l'erreur:

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

Voici les bits de configuration pertinents:

jest.conf.json

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

.babelrc

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

Script de test

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

Mise à jour:

Comme suggéré, j'ai essayé d'exécuter le test sans jest.conf.js, mais le testRegex est nécessaire pour que Jest trouve mes tests, j'ai essayé de déplacer les tests vers le répertoire de test par défaut et ils échouent toujours.

Je voudrais préciser que les tests eux-mêmes fonctionnent bien, le problème semble être où l'un de mes modules importés utilise ES6, dans mon exemple ci-dessus, si je n'importe pas mon composant de carrousel, le test fonctionne correctement, dès que j'importe que le test s'étouffe sur l'instruction d'importation dans ce fichier. Il semble que les modules importés ne soient pas transposés.

Mise à jour # 2

Après quelques recherches, il semble que le problème soit que babel ne transpile pas ES6 dans node_modules. J'ai créé un exemple de référentiel pour le démontrer ici: https://github.com/jamiedust/babel-jest-example

Je comprends que les modules tiers devraient gérer leur propre transpiling, mais nous avons un certain nombre de modules qui sont hébergés sur notre propre registre npm et sont réutilisés entre les projets, dans ces cas, Webpack gère le transpiling, pour les tests Jest, nous en avons besoin node_modules à transposer par Babel, ou un moyen de tirer parti de notre webpack mis en place pour le faire pour nous.

Solution

Ajoutez la configuration suivante dans package.json (ou fichier de configuration Jest).

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

Par défaut, tout code dans node_modules est ignoré par babel-jest, voir l'option Jest config transformIgnorePatterns . J'ai également créé un PR sur votre exemple de dépôt , afin que vous puissiez le voir fonctionner.

Bien que cela fonctionne, je l'ai trouvé extrêmement lent dans les applications réelles qui ont beaucoup de dépendances contenant des modules ES. La base de code Jest a une approche légèrement différente à cela comme vous pouvez le trouver dans "babel-jest transforming dependencies" (désolé, ne sera pas permettez-moi de poster plus de 2 URL). Cela peut également prendre beaucoup plus de temps sous Windows, voir "Prendre 10 secondes sur un dépôt vide" .

Si vous faites des tests "unitaires", la moquerie est probablement la meilleure façon de procéder.

10
Samuel Sharpe

Vous pouvez essayer d'ajouter le plugin transform-es2015-modules-commonjs à votre fichier de configuration babel à des fins de test uniquement. Voici un exemple de fichier de configuration qui indique à babel de ne transpiler les modules que dans un environnement de test. Vous pouvez le mettre sous vos presets:

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

Vous pouvez lire sur le plugin ici:

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

Ensuite, lorsque vous exécutez vos tests Jest sur la ligne de commande, spécifiez NODE_ENV = test (vous devrez peut-être ajouter l'indicateur --no-cache à la commande la première fois après avoir apporté la modification à la configuration babel car Jest met en cache la sortie babel, mais après que vous pouvez laisser de côté:

NODE_ENV=test jest --no-cache

J'ai entendu parler de ce problème lors d'un séminaire React par Brian Holt au Frontend Masters. https://frontendmasters.com/courses/

2
A. Cookro

J'ai fait face au même problème (node_module non transpilé par babel-jest), sans pouvoir le résoudre.

Au lieu de cela, je réussis finalement en me moquant du node_module, comme décrit ici https://facebook.github.io/jest/docs/manual-mocks.html

NB: la définition de maquettes dans les sous-dossiers __mocks__ Ne fonctionnait pas pour moi. J'ai donc passé la maquette en tant que deuxième paramètre de la fonction jest.mock(). Quelque chose comme :

    jest.mock('your_node_module', () => {})
1
Grégory Le Garec

Une autre cause possible. Babel ignore maintenant votre .babelrc dans node_modules et utilise celui fourni par la dépendance. Si vous contrôlez la dépendance, vous devrez lui ajouter un .babelrc et babel utilisera ces paramètres pour cela.

cela peut cependant poser des problèmes si votre dépendance et votre projet utilisent des versions ou modules babel différents.

1
FreakinaBox