webentwicklung-frage-antwort-db.com.de

create-react-app & jest - SyntaxError: Unerwarteter Tokenimport

HINWEIS: Ich habe dieses Problem behoben, indem der gesamte Code in meinem src/nod_modules-Ordner direkt in den src-Ordner verschoben und src/node_modules gemäß diesem kurzen Thread gelöscht wurde: https://github.com/facebook/create-react-app/issues/4241


Ich verwende Create-React-App und habe Probleme beim Ausführen von Jest.

Wenn ich versuche, eine meiner React-Komponenten in meine Testdatei zu importieren, erhalte ich eine Fehlermeldung, wenn ich 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

So sieht meine Testdatei aus:

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

Der Fehler wird jedoch nicht ausgegeben, wenn ich mich im Stammverzeichnis der src-Datei befinde und meine index.js importiere. Zu diesem Zeitpunkt wird der Fehler in der ersten Datei ausgegeben, die index.js importiert. Zum Beispiel:

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.

terminal ausgang

 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)

Es scheint, als könnte Babel im Zusammenhang mit Jest die Dateien in src/node_modules nicht richtig kompilieren. Ich weiß nur nicht, wie ich das korrigieren kann! Alle Erkenntnisse wären dankbar.

Zu Ihrer Information, Jest soll mit Create-React-App sofort funktionieren, und ich möchte nicht auswerfen. Ohne Auswerfen kann ich bestimmte Änderungen, die ich an anderer Stelle empfohlen habe, nicht ändern, z. B. das Aktualisieren der Jest-Einstellungen in package.json.

6
haiba

Der Code in node_modules/user/LoginContainer.js ist keine Produktionsversion (babelifizierte Version), da diese import-Anweisung noch vorhanden ist. 

Jest, der mit create -react-app vorkonfiguriert ist, schließt alles aus node_modules von babel-transformation aus, bevor Tests ausgeführt werden, vorausgesetzt, der Code in node_modules würde vorbabelifiziert werden.

Und da Ihr Modul in node_modules nicht babelified ist, gibt Jest einen Fehler aus, sobald es auf die import-Anweisung stößt.

Lösung

1. Sie benötigen ein Build-Skript für Ihr node_module. Versuchen Sie, die Produktionsversion Ihres Moduls in node_modules zu platzieren. Dies wird den Trick tun, aber auch weitere Probleme verursachen (nach meiner Erfahrung).

2. Startet die Konfiguration von Jest und seinen Abhängigkeiten explizit ohne Auswerfen. Im Wesentlichen durch Ändern Ihres Testskripts in jest --env=jsdom. Sie müssen jest, reag-dom, babel-transforms- * explizit installieren und anschließend mithilfe der jest-Konfiguration in package.json konfigurieren.

Hier müssen Sie sich auf zwei Hauptkonfigurationsoptionen konzentrieren - transformIgnorePatterns und transform.

Kurz gesagt, alles verwandeln und nicht alles, was bereits verwandelt ist.

Werfen Sie einen Blick auf Jest configuration section für weitere Details.

1
Himanshu Singh

versuchen Sie, die .bablerc-Datei in Ihrer Anwendung hinzuzufügen

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

Sie müssen die zu verwendende Voreinstellung angeben, damit Jest sie während der Ausführung von Testfällen verwenden kann. Jest kennt kein Webpack, daher müssen Voreinstellungen in dieser Datei erwähnt werden.