web-dev-qa-db-fra.com

create-react-app & jest - SyntaxError: import de jeton inattendu

REMARQUE: j'ai résolu ce problème en déplaçant directement tout le code de mon dossier src/nod_modules dans le dossier src et en supprimant src/node_modules conformément à ce fil court: https://github.com/facebook/create-react-app/issues/4241

J'utilise create-react-app et rencontre des difficultés pour exécuter Jest.

Lorsque je tente d'importer l'un de mes composants React dans mon fichier de test, un message d'erreur s'affiche lorsque je yarn test:

Test suite failed to run

.../src/node_modules/common/ErrorMessage.js:1
({"Object.<anonymous>":function(
module,exports,require,__dirname,__filename,global,jest)
{import React from 'react'
^^^^^^

SyntaxError: Unexpected token import

Voici à quoi ressemble mon fichier de test:

// test.test.js

// attempting to import
import ErrorMessage from '../node_modules/common/ErrorMessage.js'

// dummy test
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3)
})

Cependant, l'erreur ne se produit pas si je suis à la racine du fichier src, en important mon index.js. À ce stade, l'erreur est renvoyée dans le premier fichier importé par index.js. Par exemple:

test.test.js

import index from './index'

index.js

import React from 'react'
import { render } from 'react-dom'
import './style/index.css'
import LoginContainer from './node_modules/user/LoginContainer'
import NewUser from './node_modules/user/NewUser'
// etc.

sortie terminal

 FAIL  src/test.test.js
  ● Test suite failed to run

    /Users/hannahmccain/Desktop/DEV/expense-report/fullstack-expense-report/client/src/node_modules/user/LoginContainer.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/index.js:11:164)
      at Object.<anonymous> (src/test.test.js:3:14)

Il semble que, dans le contexte de Jest, Babel ne puisse pas compiler correctement les fichiers dans src/node_modules. Je ne sais pas comment corriger ça! N'importe quelles idées seraient appréciées.

Pour votre information, Jest est supposé fonctionner immédiatement avec create-react-app, et je ne veux pas éjecter. Sans éjection, je ne parviens pas à apporter certaines modifications recommandées ailleurs, telles que la mise à jour des paramètres Jest de mon package.json.

reactjsjestjsbabeljscreate-react-app
6
haiba

Le code à l'intérieur de node_modules/user/LoginContainer.js n'est pas une version de production (version babélifiée) car il contient toujours cette instruction d'importation. 

Jest qui est pré-configuré avec create-react-app, exclut tout ce qui est dans node_modules de babel-transformation avant d'exécuter des tests, en supposant que le code dans node_modules serait pré-babélifié.

Et comme votre module à l'intérieur de node_modules n'est pas babélifié, Jest génère une erreur dès qu'il rencontre une instruction d'importation.

Solution

1. Vous devez utiliser un script de construction pour votre node_module. Essayez de placer la version de production de votre module dans node_modules. Cela fera l'affaire, mais créera également d'autres problèmes (selon mon expérience).

2. Commencez à configurer jest et ses dépendances explicitement sans éjecter. Essentiellement en changeant votre script de test en jest --env=jsdom. Vous devrez installer jest, react-dom, babel-transforms- * explicitement, puis configurer à l’aide de la configuration de jest dans package.json.

Ici, vous devez vous concentrer sur deux options de configuration principales - transformIgnorePatterns et transform.

En bref, transformez tout et reconnaissez tout ce qui est déjà transformé.

Jetez un oeil à Jest configuration section pour plus de détails.

1
Himanshu Singh

essayez d'ajouter le fichier .bablerc dans votre application

{
  "presets": ["es2015", "react"]
}

Vous devez spécifier le préréglage à utiliser pour que jest puisse les utiliser lors de l'exécution de scénarios de test. Jest n'a pas connaissance de webpack, c'est pourquoi les préréglages doivent être mentionnés dans ce fichier.

0
Karthikayan Selvaraj