Jest: Jest ist mit der React-App auf unerwartetes Token gestoßen

Erstellt am 31. Aug. 2018  ·  42Kommentare  ·  Quelle: facebook/jest

Liebe Scherz? Bitte erwägen Sie, unser Kollektiv zu unterstützen: 👉 https://opencollective.com/jest/donate

🐛 Fehlerbericht

Beim Versuch, Tests mit Jest in einer React-App auszuführen, erhalte ich einen Jest encountered an unexpected token Fehler. Ich habe die Link Komponente kopiert und direkt von hier aus getestet. Dies ist der Fehler:

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

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\workspace\react\testapp\src\components\Link.test.js: Unexpected token (8:4)

       6 | test('Link changes the class when hovered', () => {
       7 |   const component = renderer.create(
    >  8 |     <Link page="http://www.facebook.com">Facebook</Link>,
         |     ^
       9 |   );
      10 |   let tree = component.toJSON();
      11 |   expect(tree).toMatchSnapshot();

      at Parser.raise (node_modules/@babel/parser/lib/index.js:3938:15)
      at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5247:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6327:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5923:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5902:21)
      at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5811:21)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5783:21)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5730:21)
      at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:6994:18)
      at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:6123:22)

Hier ist mein package.json

{
  "name": "testapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --config ./config/webpack.config.development.js",
    "build": "webpack -p --config ./config/webpack.config.production.js",
    "test": "jest"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "moment": "^2.22.2",
    "polished": "^2.0.3",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-delay-render": "^0.1.2",
    "react-dom": "^16.4.2",
    "react-imported-component": "^4.6.2",
    "react-router-dom": "^4.3.1",
    "simple-grid": "^1.0.1",
    "styled-components": "^3.4.5",
    "uuid": "^3.3.2",
    "validator": "^10.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-styled-components": "^1.6.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.5.0",
    "mini-css-extract-plugin": "^0.4.2",
    "react-test-renderer": "^16.4.2",
    "regenerator-runtime": "^0.12.1",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  }
}

Hier ist meine .babelrc Datei (befindet sich im Stammverzeichnis):

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components",
    "@babel/plugin-syntax-dynamic-import"
  ],
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "env": {
    "development": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["babel-plugin-styled-components", { "displayName": true }],
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    },
    "test": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["babel-plugin-styled-components", { "displayName": true }],
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    },
    "production": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-styled-components",
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

Fortpflanzen

Schritte zum Reproduzieren des Verhaltens:

  • Installieren Sie Jest mit yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core
  • Erstellen Sie einen Test
  • yarn test

Erwartetes Verhalten

  • Scherz sollte funktionieren

npx envinfo --preset jest

Fügen Sie die Ergebnisse hier ein:

OS: Windows 10
    CPU: x64 Intel(R) Xeon(R) CPU E3-1505M v6 @ 3.00GHz
  Binaries:
    Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD

Hilfreichster Kommentar

Nach 3 Tagen finde ich gerade die Lösungen für dieses Problem heraus.
Dafür gibt es 2 Lösungen:

Lösung 1:

Sie können Ihren Dateinamen von .babelrc in babel.config.js ändern, und das wird funktionieren.

## Lösung 2:
Ich benutze diesen Weg.
Erstellen Sie eine Transformationsdatei wie diese (meine ist jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Hier ist mein jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Und mein ich habe immer noch mein .babelrc
```
const umgebungen = require("./env-config.js");

module.exports = {
Voreinstellungen: [
[
"nächste/babel",
{
"preset-env": {
useBuiltIns: "Eintrag"
}
}
]
],
Plugins: [
["styled-components", { ssr: true, displayName: true, preprocess: false }],
[
"Modul-Resolver",
{
Wurzel: ["./"]
}
]
],
Umgebung: {
Entwickler: {
Plugins: [
["transformieren-definieren", Umgebungen],
["Modul-Resolver", { root: ["./"] }],
"verwandeln-dekorateure-vermächtnis",
"Transform-Klasse-Eigenschaften"
]
},
bauen: {
Plugins: [
["transformieren-definieren", Umgebungen],
["Modul-Resolver", { root: ["./"] }],
"verwandeln-dekorateure-vermächtnis",
"Transform-Klasse-Eigenschaften"
]
},
Produktion: {
Voreinstellungen: [
[
"minify", // warum hier minify hinzufügen, wir führen uglify über die gesamten Code-Bundles aus
{
mangeln: falsch,-
auswerten: falsch
}
]
],
Plugins: [
["transformieren-definieren", Umgebungen],
["@babel/plugin-proposal-decorators", { Legacy: true }],
["@babel/plugin-proposal-class-properties", { Loose: true }],
["Modul-Resolver", { root: ["./"] }]
],
Kommentare: falsch,
kompakt: wahr,-
verkleinert: wahr
}
}
};
````
Hoffe, das kann euch dazu bringen, dieses Problem zu bestehen. Jubeln.

Alle 42 Kommentare

Das gleiche Problem habe ich auch.

Selbes Problem hier.

gleiches Problem hier.. etwas komplizierter, da ich mit einem Monorepo arbeite.

@fabioSalimbeni @hoaiduyit @mikedloss Ich habe meine React- und React-Native-Tests ( Jest und enzyme ) in einem Lerna-Monorepo mit Babel 7 bestanden.

Sie müssen die neue Babel-Konfiguration mit babel.config.js wenn Sie in einem Monorepo arbeiten: https://babeljs.io/docs/en/v7-migration.

Dies ist mein babel.config.js für die Wurzel des Monorepos:

module.exports = {
    overrides: [
        {
            test: 'platforms/webApp1',
            extends: 'platforms/webApp1/babel.config.js'
        },
        {
            test: 'platforms/webApp2',
            extends: 'platforms/webApp2/babel.config.js'
        }
    ]
};

So sieht mein babel.config.js für webApp1 eine der Monorepo-Apps:

module.exports = {
    env: {
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        modules: 'commonjs',
                        debug: false
                    }
                ],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        production: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        development: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
};

Und das ist die Jest-Konfiguration:

    "jest": {
        "verbose": true,
        "clearMocks": true,
        "collectCoverage": true,
        "setupTestFrameworkScriptFile": "<rootDir>/config/setupTest.js",
        "transform": {
            "^.+\\.js$": "babel-jest"
        },
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
        }
    }

setupTest.js sieht so aus:

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

fileMocks.js sieht so aus:

module.exports = 'i-am-a-stubbed-file';

styleMocks.js sieht so aus:

module.exports = {};

Sie müssen auch einige Babel-Plugins und die babel-core Version als devDependencies in den package.json jeder App hinzufügen:

        ...
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        ...
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        ...

Nach 3 Tagen finde ich gerade die Lösungen für dieses Problem heraus.
Dafür gibt es 2 Lösungen:

Lösung 1:

Sie können Ihren Dateinamen von .babelrc in babel.config.js ändern, und das wird funktionieren.

## Lösung 2:
Ich benutze diesen Weg.
Erstellen Sie eine Transformationsdatei wie diese (meine ist jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Hier ist mein jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Und mein ich habe immer noch mein .babelrc
```
const umgebungen = require("./env-config.js");

module.exports = {
Voreinstellungen: [
[
"nächste/babel",
{
"preset-env": {
useBuiltIns: "Eintrag"
}
}
]
],
Plugins: [
["styled-components", { ssr: true, displayName: true, preprocess: false }],
[
"Modul-Resolver",
{
Wurzel: ["./"]
}
]
],
Umgebung: {
Entwickler: {
Plugins: [
["transformieren-definieren", Umgebungen],
["Modul-Resolver", { root: ["./"] }],
"verwandeln-dekorateure-vermächtnis",
"Transform-Klasse-Eigenschaften"
]
},
bauen: {
Plugins: [
["transformieren-definieren", Umgebungen],
["Modul-Resolver", { root: ["./"] }],
"verwandeln-dekorateure-vermächtnis",
"Transform-Klasse-Eigenschaften"
]
},
Produktion: {
Voreinstellungen: [
[
"minify", // warum hier minify hinzufügen, wir führen uglify über die gesamten Code-Bundles aus
{
mangeln: falsch,-
auswerten: falsch
}
]
],
Plugins: [
["transformieren-definieren", Umgebungen],
["@babel/plugin-proposal-decorators", { Legacy: true }],
["@babel/plugin-proposal-class-properties", { Loose: true }],
["Modul-Resolver", { root: ["./"] }]
],
Kommentare: falsch,
kompakt: wahr,-
verkleinert: wahr
}
}
};
````
Hoffe, das kann euch dazu bringen, dieses Problem zu bestehen. Jubeln.

@GeorgianSorinMaxim Das Problem ist, dass meine Scherz-App die Datei .babelrc ignoriert und die Änderung in babel.config.js das Problem löst, aber ich habe es trotzdem gelöst, meine Antwort steht über diesem Kommentar.

danke @GeorgianSorinMaxim @hoaiduyit Am Ende habe ich es einfach gelöst, indem ich einen benutzerdefinierten Transformator für Babel-Jest erstellt habe. Keine weiteren Änderungen, wo nötig.

Babel 7 scheint babel.config.js zu benötigen, um richtig zu funktionieren, verwenden Sie das anstelle von babelrc

babel-jest verlässt sich immer noch auf babel-core aus Babel 6, wenn Sie Babel 7 verwenden möchten, können Sie es verwenden
dieser Transformator babel7-jest

babel-jest funktioniert gut mit Babel 7, kein benutzerdefinierter Transformator erforderlich

@SimenB Ich habe mein .babelrc in babel.config.js aber es zeigt immer noch diesen Fehler mit unerwartetem Token an. Es funktioniert jedoch mit babel7-pre.42. Gibt es noch andere Dinge, die häufig übersehen werden? :) Vielen Dank.

@alexindigo Schau babel.config.js schreibt

https://babeljs.io/docs/en/konfiguration

Ja, das Ausführen von yarn upgrade --latest das Problem behoben :)

@alexindigo @hoaiduyit Wie um babel.config.js herausbekommen? Als ich das gleiche Problem bekämpfte und Ihre Lösungen fand, dachte ich bei mir... _"hmmm, das wird auf keinen Fall funktionieren, aber ich werde es trotzdem versuchen."_ aber es hat wirklich lulz. Danke

Jest- und Enzymkonfiguration: Fügen Sie den folgenden Code in package.json . hinzu

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

Für die Einrichtung von Enzym => setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Für setupTestFrameworkScriptFile : setupTests.js global.fetch = require('jest-fetch-mock')

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

nur .tsx-Dateien haben das gleiche Problem?

Nur um die Neuigkeiten zu verbreiten, wurde Jest v24 aktualisiert, um Babel 7 intern zu verwenden, die Verwendung von babel bridge oder babel7-jest sollte nicht mehr benötigt werden
https://twitter.com/i/web/status/1088904207653105664

Ich habe .babelrc in babel.config.js und auch auf Babel7 aktualisiert und habe immer noch den gleichen Fehler wie zuvor. Meine babel.config.js Datei:

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Ich habe @babel/preset-react installiert und zu meiner babel.config.js Datei hinzugefügt. Fehler behoben.

Meine babel.config.js Datei wurde von babel-jest nicht erkannt, weil ich sie in das Verzeichnis __test__ . Ich habe es in das oberste Verzeichnis verschoben, in dem sich package.json befand und alles funktionierte.

Ich habe ein ähnliches Problem gelöst, indem ich Folgendes getan habe:

1- fügen Sie die Enzym-Setup-Datei hinzu und schreiben Sie Folgendes:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

2- Fügen Sie Ihrer package.json eine beliebige Konfiguration wie folgt hinzu:

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3- fügen Sie die .babelrc-Datei zu Ihrem Root-Pfad hinzu und schreiben Sie Folgendes hinein:

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

4- Wenn Sie in Ihrem Test einen Fehler beim Schlüsselwort "expect" erhalten haben, führen Sie einfach npm install -D chai und importieren Sie die Expect-Funktion wie folgt in Ihren Testcode import { expect } from 'chai';

Wenn Sie immer noch einen Fehler erhalten, versuchen Sie, babel-Abhängigkeiten wie diese zu installieren npm install -D @babel/core @babel/preset-env @babel/preset-react

hoffe das hilft.

Nach 3 Tagen finde ich gerade die Lösungen für dieses Problem heraus.
Dafür gibt es 2 Lösungen:

Lösung 1:

Sie können Ihren Dateinamen von .babelrc in babel.config.js ändern, und das wird funktionieren.

Meine Lösung:

Ich hatte keine .babelrc-Datei, also dachte ich, dass es auch umgekehrt funktionieren sollte, und erstellte stattdessen eine .babelrc-Datei mit den voreingestellten Informationen aus babel.config.js. (Ich habe eine zusätzliche Datei erstellt, ich habe das Original nicht umbenannt)
Beim erneuten Ausführen des Tests erhielt ich einen neuen Fehler: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" .
Ich habe diesen Fehler gegoogelt und er hat mich hierher geführt . Ich habe die Anweisungen befolgt ( npm install [email protected] ) und der Test läuft jetzt und ist erfolgreich.

Nur um die Neuigkeiten zu verbreiten, wurde Jest v24 aktualisiert, um Babel 7 intern zu verwenden, die Verwendung von babel bridge oder babel7-jest sollte nicht mehr benötigt werden
https://twitter.com/i/web/status/1088904207653105664

Ein Upgrade auf Jest v24 hat dieses Problem für mich behoben :)

bekomme unexpected token Fehler für

> 10 | const browser; (das Semikolon am Ende)

mein Paket.json

 "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "assert": "^1.4.1",
    "chai": "^4.2.0",
    "jest-puppeteer": "^4.0.0",
    "screen-info": "^1.0.1",
    "screenres": "^2.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-jest": "^24.3.0",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "puppeteer": "^1.13.0"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@babel).+\\.js$"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        },
      },
      'jest'
    ]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  }
}

Getestete hoaiduyit-Lösung. Es funktioniert. Ich muss nur babel.config.js hinzufügen, installieren babel-jest transform/transpile jest in jest.config.js

Nach 3 Tagen finde ich gerade die Lösungen für dieses Problem heraus.
Dafür gibt es 2 Lösungen:

Lösung 1:

Sie können Ihren Dateinamen von .babelrc in babel.config.js ändern, und das wird funktionieren.

Lösung 2:

Ich benutze diesen Weg.
Erstellen Sie eine Transformationsdatei wie diese (meine ist jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Hier ist mein jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Und mein ich habe immer noch mein .babelrc

const enviroments = require("./env-config.js");

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          useBuiltIns: "entry"
        }
      }
    ]
  ],
  plugins: [
    ["styled-components", { ssr: true, displayName: true, preprocess: false }],
    [
      "module-resolver",
      {
        root: ["./"]
      }
    ]
  ],
  env: {
    dev: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    build: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    production: {
      presets: [
        [
          "minify", // why add minify here, we run uglify over the whole code bundles
          {
            mangle: false,
            evaluate: false
          }
        ]
      ],
      plugins: [
        ["transform-define", enviroments],
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["module-resolver", { root: ["./"] }]
      ],
      comments: false,
      compact: true,
      minified: true
    }
  }
};

Hoffe, das kann euch dazu bringen, dieses Problem zu bestehen. Jubeln.

tks für Ihre Methode ~ diese Methode kann mein Problem richtig beheben!

Hallo, ich habe mehrere Dinge in diesem Thread ausprobiert, aber nichts scheint zu funktionieren. Der Hauptfehler ist seltsam, b/c scheint auf Zeilennummern zu verweisen, die keinen Sinn ergeben, fast so, als ob der Quellcode und der tatsächliche Code, der ausgeführt werden soll, nicht ausgerichtet sind.

Dieser Fehler, Jest ist auf ein unerwartetes Token gestoßen, bleibt bestehen. Ich bin auf Jest > 24, kein Skript, es ist eine ausgeworfene React-Create-App vor kurzem (vor 6 Monaten ~). Cache leeren und node_modules entfernen hat nicht geholfen. Vielleicht könnte jemand genau erklären, welche Konfiguration vorhanden sein muss, damit Scherz richtig transformiert und ausgeführt wird und welche Hinweise mein genauer Fehler gibt ...

FAIL  __e2e__/chat/sms.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/ben/dev/app/webui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 |   afterEach(async () => {
       6 |     await logout();
    >  7 | 
         | ^
       8 |     await page.evaluate(() => {
       9 |       localStorage.clear();
      10 |     });

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (__e2e__/chat/sms.spec.js:7:49)

Danke euch allen,

Jenkins schlägt aufgrund dieses Problems fehl, gibt es einige funktionierende Lösungen?

Für jeden, der Create-React-App verwendet, wird das Hinzufügen von transformignorepatterns zu Ihrer package.json das Problem nicht lösen, da nur bestimmte Konfigurationen in package.json geändert werden können, wenn Sie CRA verwenden.

Ich hatte Probleme damit, dass Jest eine interne Bibliothek abholte. Jest zeigte 'unerwartete Token'-Fehler an, wo immer ich meine Importe aus dieser Bibliothek hatte.

Um dies zu lösen, können Sie Ihr Testskript wie folgt ändern:
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

Hallo zusammen, ich hatte Schwierigkeiten mit meinem kleinen Projekt, das JetSet heißt und in React Native geschrieben wurde, Unit-Tests durchzuführen. Ich habe 2 Tage lang gesucht, um dieses Problem zu lösen, und ich hatte versucht, Dinge wie babel.config.js zu bearbeiten, diese Datei zu löschen und dann eine .babel-Datei zu erstellen (und einige Scheiße hinzuzufügen).


_Fehlerbericht:_
D:\jetset\JetSetApp>jest SaveData.test.js
FAIL __test__/SaveData.test.js
● Testsuite konnte nicht ausgeführt werden

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

D:\jetset\JetSetApp\node_modules\expo-file-system\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as FileSystem from './FileSystem';
                                                                                                ^

SyntaxError: Unexpected token *

  1 | import React, { Component } from 'react'
  2 | import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
> 3 | import { documentDirectory, getInfoAsync, readDirectoryAsync, readAsStringAsync, writeAsStringAsync, deleteAsync } from 'expo-file-system';
    | ^
  4 |
  5 | /**
  6 |  * This class primarily serves to handle files within the phone system so that results can be stored

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (app/resources/SaveData/SaveData.js:3:1)

Testsuiten: 1 fehlgeschlagen, 1 insgesamt
Tests: 0 insgesamt
Schnappschüsse: 0 insgesamt
Zeit: 3.509s
Alle Testsuiten ausgeführt, die /SaveData.test.js/i entsprechen.


_ babel.config.js _
module.exports = function(api) {
api.cache (wahr);
Rückkehr {
Voreinstellungen: ['babel-preset-expo'],
};
};


_ Paket.json _
{
"main": "node_modules/expo/AppEntry.js",
"Skripte": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "Expo auswerfen",
"test": "scherz"
},
"scherz": {
"preset": "reaktiv-nativ"
},
"Abhängigkeiten": {
"expo": "^34.0.1",
"expo-file-system": "^6.0.2",
"expo-mail-composer": "^6.0.0",
"moment": "^2.24.0",
"reagieren": "16.8.3",
"react-dom": "^16.8.6",
"react-native": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"react-native-gesture-handler": "^1.3.0",
"react-native-selection-group": "^1.1.2",
"react-native-web": "^0.11.4"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"babel-scherz": "^24.9.0",
"babel-preset-expo": "^ 6.0.0",
"scherz": "^24.9.0",
"prop-types": "^15.7.2",
"react-native-dismiss-tastatur": "^1.0.0",
"react-native-modal-datetime-picker": "^7.5.0",
"reagieren-navigation": "^3.12.1"
},
"privat": wahr
}

Zu Ihrer Information: Ich denke, wir haben am Ende eine wirklich dumme Lösung dafür gefunden, als ob sich das gesamte Build-System nicht gut verhalten würde, wenn NODE_ENV="test" nicht gesetzt war.

In den neueren Versionen von React Jest ist daher in package.json das Testskript eingebaut
"test": "react-scripts test"
Anstatt von
"test": "jest"

In den neueren Versionen von React Jest ist daher in package.json das Testskript eingebaut
"test": "react-scripts test"
Anstatt von
"test": "jest"

Vielen Dank, das hat das Problem für mich gelöst!

Nachdem ich viel ausprobiert habe, das Problem bei mir:
fehlende "transform-es2015-modules-commonjs", in .babelrc-Datei

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-flow-strip-types",
    "jsx-control-statements",
    "import-glob",
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

"scherz": "^24.9.0",
"babel-scherz": "23.6.0",

versuche deinen Scherz und babel-jest zu aktualisieren

Ich habe .babelrc in babel.config.js und auch auf Babel7 aktualisiert und habe immer noch den gleichen Fehler wie zuvor. Meine babel.config.js Datei:

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Ich habe @babel/preset-react installiert und zu meiner babel.config.js Datei hinzugefügt. Fehler behoben.

Dies hat mein Problem behoben, ich habe @babel/preset-env installiert und zu babel.config.js hinzugefügt und es wurde behoben

danke @jmayergit

Ich hatte die Datei babel.rc in die Datei babel.config.js geändert, aber bei mir funktionierte es nicht. Dann sah ich diese Antwort: https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
Wenn Sie Import-Plugins haben, trennen Sie die Plugins für Test-, Entwicklungs- und Produktionsumgebungen.

Meine Datei babel.config.js sieht jetzt so aus, was funktioniert:

module.exports = {
  presets: [
    [
      'next/babel',
    ],
  ],
  env: {
    test: {

    },
    dev: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
    production: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
  },
};

Ich kämpfe auch seit 5 Tagen mit diesem Fehler

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".   

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\Users\SK-PC\Desktop\React-Course\expansify\src\test\components\MyNavbar.test.js: Unexpected token (5:28)

      3 | import { MyNavbar } from '../../components/MyNavbar'
      4 | test("Should return MyNavbar component", () => {
    > 5 |     const wrapper = shallow(<MyNavbar />)
        |                             ^
      6 |     expect(wrapper.find('.navbar-brand').find('kbd').text()).toBe("Expensify")
      7 |     // const renderer = new ReactShallowRenderer()
      8 |     // renderer.render(<MyNavbar />)

      at Parser._raise (node_modules/@babel/parser/src/parser/location.js:241:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/location.js:236:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/location.js:220:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1144:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:539:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:519:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:311:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:263:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:211:21)

 PASS  src/test/reducers/filters.test.js

Test Suites: 1 failed, 5 passed, 6 total
Tests:       29 passed, 29 total
Snapshots:   0 total
Time:        12.144s
Ran all test suites.

@fullstacksk

In den neueren Versionen von React Jest ist daher in package.json das Testskript eingebaut
"test": "react-scripts test"
Anstatt von
"test": "jest"

Sie können das Dokument lesen unter:
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@catmans1
Ich habe keine Abhängigkeiten wie Create-React-App oder React-Scripts installiert.
Wird es funktionieren?
"test": "react-scripts test"
Anstatt von
"test": "jest"

Jetzt funktioniert es, wenn ich babel-preset-jest zum Testen der Option mit env und reagiere. Ich habe Babel-Jeast entfernt.

Hat bei mir funktioniert: füge „@babel/preset-react“ bei babel.config.js

https://medium.com/@audreyhal/how-to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a

Ich habe diesen Fehler gesehen, nachdem ich einen dummen Fehler gemacht und meine erste Testdatei mit der Erweiterung .ts anstelle der Erweiterung .tsx . Weit entfernt vom ursprünglichen Problem, aber ich dachte, es könnte für jemanden hilfreich sein

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen