[Reagieren]Scherz SyntaxError: Unexpected token importieren

Ich habe wirklich sehr zu kämpfen und ich kann nicht herausfinden, wie diese Arbeit zu machen.
Scheint es Tonnen von Fragen zu diesem Thema und ich habe versucht, jeden von Ihnen, und ich immer noch zu haben scheinen ein problem mit Scherz. importieren Sie einfach nicht scheinen, überhaupt zu arbeiten.
Also bitte kann jemand mir helfen, dieses problem lösen.

Fehler

C:\Users\admin\Documents\my-app\_tests_\main.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at process._tickCallback (internal/process/next_tick.js:109:7)

main.spec.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { Home } from '../src/Home';

test('Basic Test', () => {
  expect(2 + 2).toBe(4);
});

Laufen, dadurch wird der Fehler, wenn ich aber kommentieren Sie die Zeile importieren, es funktioniert.

bablerc

{
    "plugins": [
            "transform-async-functions",
            "transform-object-rest-spread",
            "transform-regenerator"
          ],
     "presets": [
            "es2015",
            "react"
          ]
}

Ich habe versucht, fügen Sie den „env“: {„test“: {„plugins“: [„transform-es2015-Module-commonjs“]}}, aber es hat nicht alles tun, also nahm ich es für jetzt.

Paket.json

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "app",
  "scripts": {
    "start": "node server.js",
    "postinstall": "webpack -p --define process.env.NODE_ENV=\"'production'\" --define process.env.SERVER_ROOT=\"'${SERVER_ROOT}'\"",
    "start-dev": "webpack-dev-server",
    "test": "jest"
  },
  "engines": {
    "node": "6.11.1",
    "npm": "3.10.8"
  },
  "jest": {
    "transform": {
       "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": { "\\.(s?css|less)$": "identity-obj-proxy" }
  },
  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-async-functions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-regenerator": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.4",
    "file-loader": "^0.11.1",
    "image-webpack-loader": "^3.3.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-table": "^3.3.3",
    "react-datepicker": "^0.46.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.3",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-persist": "^4.6.0",
    "redux-thunk": "^2.2.0",
    "sails.io.js": "^1.1.10",
    "socket.io-client": "1.6.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.2",
    "babel-jest": "^20.0.3",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^2.9.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "jest": "^20.0.4",
    "react-test-renderer": "^15.6.1",
    "webpack-dev-server": "^2.4.2",
    "whatwg-fetch": "^2.0.3"
  }
}
  • Die Dinge ändern sich schnell in die js-Welt. Mit webpack 4, und babel, der richtig konfiguriert ist, sollten Sie nicht verwenden müssen, babel-core noch babel-Scherz. Nur die Verwendung von Voreinstellungen env, react, stage-0 zu babelrc. Wenn Sie mit modules: false auf root-Ebene, müssen Sie mit modules: true auf der test-Umgebung. Unerwartetes token importieren in der Regel bedeutet, dass babel nicht konvertieren, um commonJs-Module für den Scherz/Knoten zu konsumieren.
InformationsquelleAutor Eric | 2017-09-06



One Reply
  1. 5

    Müssen Sie mitteilen Scherz zu importieren, Ihre Dateien mithilfe von Babel.
    Es kann getan werden durch einstellen der transform Attribut jest in Ihrem package.json :

    "jest": {
        "transform": {
          "^.+\\.jsx?$": "babel-jest"
        }
    }
    • ja danke!!! dass die Importe aber jetzt bin ich immer einen Fehler SyntaxError: Unexpected token : wenn ich versuchte, Sie zu importieren meinem eigenen Skript mit der import { Home} aus ‚../src/Home‘;
    • ({„Objekt<anonym>“:function(Modul -, Ausfuhr -, erfordern,__dirname,__Dateiname,Globale,Scherz){:global .reagieren-datepicker__tether-element-attached-top .reagieren-datepicker – __ – Dreieck, :global .reagieren-datepicker__tether-element-befestigt-unten .reagieren-datepicker – __ – Dreieck, :global .reagieren-datepicker – __Jahre-Lesen-Ansicht-runter-Pfeil, :global .reagieren-datepicker__Monat-Lesen-Ansicht-unten-Pfeil
    • Wie es scheint ist das problem reagieren.datepicker
    • Klingt wie Sie sind, importieren Sie Ihren Stil. Sie können diese Artikel auf Ihrer package.json, in der Scherz-Artikel : „moduleNameMapper“: { „\\.(s?css|less)$“: „Identität-obj-proxy“ }
    • Ich habe Hinzugefügt, dass Teil um mein Paket.json-aber der Fehler immer noch da.
    • Ich denke, dass die Fehler, die Sie bekommen jetzt ist unabhängig von der Originalfarbe in diesem post geht. Können Sie zeigen das Stück code, das erstellen der Fehler???
    • Ja, ich aktualisierte den code in die Frage. das problem ist, wenn ich versucht zu importieren meiner home.js. wenn ich den Kommentar, dass es funktioniert

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.