Jest: Impor Token Tak Terduga untuk modul ES6

Saya memiliki masalah yang sama dengan React-Native dan Jest,
Jika Anda memulai proyek baru dengan:
init asli reaksi AwesomeProject
cd Proyek Luar Biasa

kemudian instal modul seperti npm install native-base --save
impor komponen apa pun dari basis asli ke file index.ios.js Anda

npm test akan membuang kesalahan ini:
../test/node_modules/native-base/index.js:4
import Drawer dari './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: Impor token yang tidak terduga

Lihat http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -customization

Saya mengalami masalah yang sama, tautan yang disediakan @cpojer sepertinya tidak membantu

Hai! 'transformIgnorePatterns' tidak....mmmm...yang harus dilakukan - mengabaikan)
Tetapi bagaimana saya bisa menggunakan impor itu dalam paket dari node_modules?

Alat peraga ini membantu saya :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
Saat ini, konfigurasi Jest saya adalah:

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... dan itu berhasil untuk saya :)

Hormat kami, Pavel Tretyakov

Hai teman-teman, saya masih menghadapi masalah ini, tetapi saya tidak menggunakan reaksi asli. Masalahnya selalu diperbaiki menggunakan lelucon --no-cache. Apakah ada cara untuk membuat lelucon bekerja menggunakan cache, tanpa membuang kesalahan ini?

Saya tidak bisa membuat transformasi ini berfungsi dengan aplikasi buat-reaksi-aplikasi saya. Selalu dapatkan "Impor token tak terduga" pada file uji apa pun yang berisi impor ES6. Saya sudah mencoba semua saran yang bisa saya temukan. no-cache tidak berdampak. Saya jelas tidak dapat mengabaikan file-file ini dari transformasi (mereka perlu diubah!).

Saya menyerah. Dengan senang hati memberikan informasi yang diperlukan.

Sepertinya saya juga mengalami masalah ini.

Sama disini

Sama disini

Anda semua kemungkinan mengalami masalah ini karena modul ES tidak didukung di Node dan Anda sengaja berhenti mengompilasinya dengan pipa build Anda (webpack, rollup) saat Anda mengirimkannya ke browser.

Anda perlu mengaktifkan kompilasi dari modul ES ke CommonJS untuk env "test" di babelrc Anda, lihat https://babeljs.io/docs/usage/babelrc/#env -option dan https://babeljs.io/docs/ plugins/transform-es2015-modules-commonjs/

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Terima kasih atas tanggapan Anda, cpojer. Kemarin saya menghapus pengaturan node env saya dan membiarkannya berjalan dengan node env default, karena lelucon bekerja secara global, tetapi tidak saat menggunakan skrip node. Tampaknya menyelesaikan masalah, jadi saya percaya bahwa masalah saya adalah dengan pengaturan node-env. Tapi itu masih sesuatu untuk dipantau.

EDIT: Ini tidak berhasil sama sekali. Perbaikan @cpojer bekerja dengan sangat baik. Terima kasih.

Perbaikan @cpojer berhasil untuk saya, terima kasih

Luar biasa, juga bekerja untuk saya, terima kasih!

Saya mengalami masalah serupa di aplikasi asli reaksi saya yang cukup sederhana.

Saat menjalankan npm test atau jest ini dikembalikan 'SyntaxError: Unexpected token import'

.babelrc

{
"presets": ["react-native"]
}

.package.json

{
  "name": "BeeAppy",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.8.2",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-test-renderer": "^16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

Apakah cuplikan env yang disarankan oleh @cpojer masuk ke .package.json?
Maaf jika itu benar-benar jelas!
Bantuan apa pun akan sangat membantu, terima kasih

@JessicaBarclay itu harus masuk dalam konfigurasi .babelrc Anda. Seperti ini:

"env": {
          "development": {
                 "plugins": ["transform-es2015-modules-commonjs"]
          }
}

Ahh terima kasih @rlage ! Diurutkan :)

FWIW, saya sebenarnya telah mengatur .babelrc dengan presets dan plugins bawah tes env seperti yang disarankan @cpojer , tetapi lupa memasukkan NODE_ENV=test pada baris skrip saya di package.json .

Sebelumnya, gagal dengan "Impor token tak terduga":

"scripts": {
  ...
  "test": "jest",
}

Setelah, berhasil mengubah file:

"scripts": {
  ...
  "test": "NODE_ENV=test jest",
}

@jlyman

Berdasarkan dokumen Jest, itu tidak diperlukan, karena Jest menetapkan NODE_ENV untuk diuji secara default.

Catatan: Jika Anda menggunakan konfigurasi Babel yang lebih rumit, menggunakan opsi env Babel, ingatlah bahwa Jest akan secara otomatis mendefinisikan NODE_ENV sebagai pengujian. Itu tidak akan menggunakan bagian pengembangan seperti yang dilakukan Babel secara default ketika tidak ada NODE_ENV yang disetel.

.babelrc ini yang berhasil untuk saya:

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

CATATAN: ini terlihat aneh, tetapi kunci pengembangan dan pengujian harus ada, jika tidak maka tidak akan berfungsi.

Kemudian saya hanya menelepon:

node_modules/.bin/jest

atau dengan package.json:

{"scripts": {"test": "jest"}}

Tidak perlu menyetel NODE_ENV untuk diuji.

@laszbalo Menarik, kehadiran env itu tampaknya berhasil. Jika saya menambahkan lingkungan pengembangan dan mengeluarkan awalan NODE_ENV eksplisit pada skrip saya, itu berfungsi. Saya telah membaca bagian dari dokumen itu juga, tetapi berakhir dengan solusi itu karena berhasil.

@jlyman solusi mana dalam dokumen?

@doudounannan Maaf jika itu tidak jelas. Solusi yang akhirnya saya lakukan adalah apa yang saya posting di sini . Seperti yang dikatakan @laszbalo , itu bertentangan dengan apa yang dikatakan dokumen di Using Babel , tetapi solusi @laszbalo atau injeksi langsung NODE_ENV test tampaknya berfungsi.

Anehnya ketika saya menggunakan "transformIgnorePatterns": [ ] maka babel mengubah file saya yang diuji, tetapi jika saya mengecualikan opsi transformIgnorePatterns maka babel tidak melakukan apa-apa... Saya memiliki .babelrc sederhana untuk pengujian saja (saya gunakan webpack untuk produksi, tetapi tidak untuk tes lelucon):

{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Saya mendapat ide dari https://github.com/facebook/jest/issues/2550#issuecomment -290812720 karena tidak ada hal lain di #770 atau di sini yang tampaknya membantu ...

Tidak peduli apa yang saya lakukan, itu selalu kesalahan yang sama:

    /.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)
      at Object.<anonymous> (node_modules/react-native-gifted-chat/src/GiftedChat.js:10:29)

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "development": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
            "cwd": "babelrc",
        }]
  ]
}

"jest": {
    "preset": "react-native",
    "setupFiles": [
        "./__tests__/setup.js"
    ],
    "testRegex": "/__tests__/.*\\.spec\\.js$"
}

Saya mengalami masalah yang sama. Saya menambahkan yang berikut ini ke lelucon saya

"jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
          "node_modules/(?!react-native|react-navigation)/"
      ]
  }

dan sekarang saya mendapatkan kesalahan berikut ketika saya menjalankan Jest:

ReferenceError: Plugin tidak dikenal "transform-replace-object-assign" ditentukan dalam "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" pada 0, mencoba menyelesaikan relatif terhadap "/Users/caalcaz/ Dokumen/Proyek/Aplikasi Perusahaan/node_modules/enzim"

@calcazar apa yang ada di node_modules/enzyme/.babelrc Anda?

Saya menyelesaikannya dengan menggunakan babel-jest _and_ ts-jest. Dalam package.json:

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "globals": {
        "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest
    "testRegex": "test/.*\\.spec\\.ts$",
    "setupFiles": [
        "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
        "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    // some coverage and results processing options
},

Kemudian di .babelrc (yang hanya saya gunakan untuk pengujian)

{
    "env": {
        "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

berharap itu membantu seseorang! (Ini untuk aplikasi aurelia jadi YMMV)

@thinkOfNumber

Inilah yang saya lihat. sebagai FYI saya menjalankan Enzyme V3.0

{
  "presets": ["airbnb"],
  "plugins": [
    ["transform-replace-object-assign", "object.assign"],
  ],
}

@thinkOfNumber terima kasih telah memposting saran Anda. Saya menggunakannya untuk mencari cara mendapatkan modul es6 dari perpustakaan eksternal untuk dikompilasi dalam lelucon. Kuncinya ada di sini

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest

Ini adalah bagian yang saya butuhkan. Terima kasih banyak!

@rochapablo di tempat yang sama. Ada keberuntungan?

Tidak, untuk saat ini saya mengabaikan tes file tertentu yang menimbulkan kesalahan

Mengikuti. Saya memiliki masalah yang sama dan sejauh ini sepertinya tidak ada yang menyelesaikannya.

Mengikuti juga

@rochapablo Sudahkah Anda berhasil menyelesaikan masalah ini?
Saya juga tidak dapat menguji komponen yang memiliki GiftedChat sebagai anak karena masalah yang Anda sebutkan ...

@todorone , coba tambahkan:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Terima kasih atas petunjuknya, tapi sayangnya itu tidak membantu. Saya bahkan mencoba bermain lebih jauh dengan regex transformIgnorePatterns tetapi tidak membantu.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
tambahkan yang di atas ke lelucon

@rochapablo Sudahkah Anda mencoba preset jest-expo ? Ada keberuntungan? Saya mengalami masalah sintaks lain dengannya & transformIgnorePatterns

Masih tidak bekerja untuk saya. Saya mendapatkan kesalahan impor sialan.

@testacode itu dinamis import , sudahkah Anda menambahkan plugin babel yang diperlukan? Lihat bagian bawah https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB terima kasih, itulah yang saya lewatkan!

Ini menarik. Beberapa pembaruan terbaru menghapus penambahan otomatis babel-jest. Jadi berjalan:

npm install babel-jest --save-dev

dan menambahkan TIDAK ADA LAINNYA dalam konfigurasi memperbaiki masalah bagi saya. Saya pikir itu harus lebih jelas dalam pesan kesalahan bahwa itu tidak lagi disertakan ...

Saya menyelesaikannya hanya dengan menginstal babel-jest:
npm i babel-jest

Juga, jangan lupa untuk membuat file .babelrc dengan konten berikut:

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

Ini bekerja untuk saya:

.babelrc :

{
    "presets": ["env", "stage-3"],
    "plugins": ["transform-class-properties"]
}

package.json :

"scripts": {
    "test": "jest --forceExit"
},
"devDependencies": {
    "babel-core": "^6.11.4",
    "babel-jest": "^21.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "^21.2.0"
}

@hqro itu berhasil untuk saya, Terima kasih 👍

Bagi saya, saya memiliki ini di file .babelrc :

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ]
}

Dan saya hanya perlu memastikan bahwa lingkungan "pengujian" menggunakan modul sebagai gantinya:

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "presets": ["react", "env"],
    }
  }
}

@nemoDreamer Lebih baik tidak mengulang plugin dan preset dalam satu konfigurasi

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

Apa pun yang saya coba, saya mendapatkan kesalahan.

> cross-env NODE_ENV=test jest --no-cache

 FAIL  src\views\Pay\__tests__\Pay.test.js
  ● Test suite failed to run

    C:\Users\***\Documents\Project\***\node_modules\ne-rc\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Alert from './Alert';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      11 |  * <strong i="6">@param</strong> {Array<Object>} [data] 每一种分期的详细信息 data=[{},{}...]
      12 |  * <strong i="7">@param</strong> {Number} [defaultSelected] 默认选中的下标
    > 13 |  * <strong i="8">@param</strong> {Funtion} [onClick] 点击触发事件
      14 |  * <strong i="9">@param</strong> {Number} [columnNum] 一行有多少列
      15 |  *
      16 |  * <strong i="10">@example</strong>

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/Installment/Installment.jsx:13:13)
      at Object.<anonymous> (src/components/Installment/index.js:8:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.693s

Ini file konfigurasi saya.

*.babelrc*

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    // webpack understands the native import syntax, and uses it for tree shaking

    "es2015",
    "stage-2",
    // Specifies what level of language features to doPay.

    // Stage 2 is "draft", 4 is finished, 0 is strawman.

    // See https://tc39.github.io/process-document/

    "react"
    // Transpile React components to JavaScript
  ],
  "env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./server/server.js",
    "api": "cross-env NODE_ENV=api node ./server/server.js",
    "clean": "rm -rf dist",
    "dist": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --progress --colors",
    "online": "cross-env NODE_ENV=development node ./server/online.js",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./src --fix",
    "test": "cross-env NODE_ENV=test jest --no-cache",
    "test:watch": "npm test --watch",
    "stats": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --profile --json > stats.json",
    "gatest": "node ./service/gatest.js"
  },
  "pre-commit": [
    "lint"
  ],
  "jest": {
    "verbose": true,
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "./test/setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "md"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "asset-inject-html-webpack-plugin": "^0.9.1",
    "autoprefixer": "^7.1.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "better-npm-run": "0.1.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.1.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "deepmerge": "^2.0.1",
    "enzyme": "^3.3.0",
    "eslint": "^4.5.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.6.4",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.6",
    "git-repo-info": "^1.4.1",
    "glob": "^7.1.2",
    "happypack": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "idb": "^2.0.4",
    "imports-loader": "^0.7.0",
    "jest": "^22.4.2",
    "lodash.range": "^3.2.0",
    "mocha": "^5.0.0",
    "node-sass": "^4.5.3",
    "node-xlsx": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "pre-commit": "^1.2.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "regenerator-runtime": "^0.11.1",
    "request": "^2.74.0",
    "require-reload": "^0.2.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "sinon": "^4.2.0",
    "style-loader": "^0.19.1",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "worker-loader": "^1.1.0"
  }
}

@kisnows https://stackoverflow.com/questions/46065371/reactjest-syntaxerror-unexpected-token-import
https://segmentfault.com/n/1330000012786721

Saat mengatur preset di .babelrc , pastikan "env" berada di antara tanda kurung ["env"] , seperti ini:

  "env": {
    "test": {
      "presets": [["env"], "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

terutama jika Anda memiliki "modules: false" dalam konfigurasi Anda.

Juga, secara default, lelucon TIDAK mengubah file dalam node_modules , lih https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

Itulah mengapa import ... tidak akan berfungsi di file node_modules . Untuk menonaktifkan ini, Anda dapat menambahkan:

transformIgnorePatterns: []

ke konfigurasi lelucon Anda.

Semoga ini membantu!

@florentchauveau Terima kasih, ini berhasil untuk saya.

@todorone @rochapablo Apakah kalian menemukan solusi untuk ini? Bahkan saya menghadapi masalah yang sama-

    import * as React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)

Saya mendapatkan kesalahan ini hanya pada pengujian komponen menggunakan
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
Mungkin ini karena @expo/react-native-action-sheet dikirimkan sebagai modul ES6 dan GiftedChat digunakan secara internal? Tapi jest / ts-jest (Saya tidak yakin) harus menanganinya jika preset ditambahkan. Ini konfigurasi Jest saya -

    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
            "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!rn-placeholder|react-native|react-navigation|native-base|react-native-datepicker|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
        ],
        "setupTestFrameworkScriptFile": "<rootDir>/src/__mocks__/Adapter.js",
        "testRegex": "(\\.(test|spec))\\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\\.snap$",
            "<rootDir>/node_modules/",
            "<rootDir>/lib/"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
        },
        "cacheDirectory": ".jest/cache"
    },

dan .babelrc -

{
    "presets": ["react-native"]
}

Saya sudah mencoba hampir semua solusi yang disebutkan di atas. Tak satu pun dari mereka bekerja dalam skenario saya. Bantuan diperlukan.

@omkarjoshi-cc satu-satunya hal yang berhasil untuk saya pada saat saya sedang mengerjakannya, adalah menambahkan paket yang memicu kesalahan, yang dalam kasus saya adalah:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Ya. Saya mencobanya. Tidak berhasil. Apakah ada hal lain yang mungkin terlewatkan? Ini benar-benar membuat frustrasi

Saya menggunakan babel 7 dan saya juga masih belum beruntung dengan "transformIgnorePatterns" - mencoba banyak ekspresi reguler yang berbeda :/

Masalah yang saya miliki adalah bahwa satu dependensi memiliki kelas es6 asli di dalamnya, dan saya memiliki kelas di sumber saya yang memperluasnya. Karena "kelas es5" yang ditranspilasikan oleh Babel tidak dapat memperluas kelas asli, saya mendapatkan kesalahan runtime dalam lelucon.

Saya mulai berpikir bahwa entah bagaimana "babel/preset-env" menghalangi bagaimana kode ditranspilasikan menjadi lelucon (node ​​target), yang mungkin tidak mengikuti target browser, tetapi masih tidak yakin tentang itu.

Adakah yang tahu cara memaksa semuanya ke es5 untuk bercanda saat menggunakan 'present-env' di .babelrc?

Satu-satunya solusi yang dapat saya pikirkan adalah tidak menggunakan babel-jest, jalankan melalui webpack (yang menggunakan babel-loader, dan aturan file mana yang akan diubah bekerja untuk saya), lalu jalankan lelucon -> Saya berpikir untuk menggunakan webpack -w dan bercanda melihat transpiled..)

Menambahkan

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat|@expo/react-native-action-sheet)"
]

bekerja untuk saya. Berkat @rochapablo 🙌

Saya berjuang dengan masalah ini. Haruskah folder keluaran saya yang sedang diuji adalah sintaks ES6 dengan import dll atau dapatkah bercanda tidak mengujinya? Saya tidak melihat commonjs di file/file output saya (menggunakannya dengan react-native)

saya menghadapi masalah yang sama dan halaman ini menyelesaikan masalah:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

Untuk beberapa alasan, alih-alih babel-jest , menggunakan yang berikut ini membuatnya bekerja untuk saya (menghormati transformIgnorePatterns rupanya)

"transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest-babel-7"
    }

btw masalah ini harus dibuka kembali di sini kan? banyak orang menghadapi kesulitan

Dalam kasus saya ternyata masalah ini disebabkan oleh mengabaikan file uji di konfigurasi babel saya. Untuk alasan yang tidak terkait, saya memiliki "ignore": ["**/*.test.js"] di .babelrc saya.

Solusinya adalah hanya mengatur opsi abaikan untuk lingkungan produksi, yaitu:

"env": {
    "production": {
      "ignore": [
        "**/*.test.js"
      ]
    }
  }

Atau, Anda dapat menentukan pola abaikan khusus untuk pengujian env.

Setelah banyak mencoba, inilah kasus saya

1. Pastikan untuk memiliki versi babe-jest yang tepat *
2. pastikan untuk memiliki konfigurasi .babelrc dengan preset (sebelumnya diinstal)
3. jika masih ada kesalahan "token tak terduga" mungkin fungsi panah tidak dikenali, plugin babel ini akan membantu Anda "mengubah-kelas-properti" juga memasukkannya ke konfigurasi babel Anda.

di sini adalah konfigurasi saya.

.babelrc

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]}

untuk enzim(setupTests.js)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-15";
configure({ adapter: new Adapter() });

package.json

 "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^4.19.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.6.2",
     "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "gh-pages": "^0.12.0",
    "jest": "^22.4.3",
    "react-addons-test-utils": "^15.4.2",
    "regenerator-runtime": "^0.11.1"
  },
"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

yarn add --dev babel-jest babel-core regenerator-runtime menambahkan ini berhasil untuk saya

Dalam kasus saya, itu adalah masalah dengan windows dan izinnya yang bodoh, mungkin tidak mengatur variabel env dengan benar.
Beralih dari git bash ke cmd.exe ditinggikan dan mulai bekerja lagi.

Saya memiliki jest didefinisikan sebagai script (berganti nama test:jest sebagai test ), di package.json . Namun, saat menjalankan npm run test , saya mendapatkan SyntaxError: Unexpected token import :

root<strong i="14">@browserify</strong>:/var/machine-learning/src# npm run test

> [email protected] test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.782s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-08T01_50_42_754Z-debug.log

Saya juga mendefinisikan jest.config.js :

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': ['/var/machine-learning/src/node_modules'],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ]
}

Saya melihat banyak hal tentang react-native , dan transformIgnorePatterns . Untungnya, dan sayangnya, saya tidak menggunakannya. Apa bug yang sulit dipahami ini. Apakah saya perlu mendefinisikan .babelrc , atau menambahkan direktif jest di package.json . Bagaimana lelucon saya script tahu tentang babel, jika ini masalahnya? Saya sudah mencoba menambahkan .babelrc , di direktori yang sama yang berisi package.json , tanpa hasil:

{
  "env": {
    "test": {
      "presets": ["env", "stage-2", "react"]
    }
  }
}

Catatan: jika ada yang ingin melacak masalah asli saya mengenai

Setelah banyak bermain-main, saya menemukan masalah berikut:

• Jest menjalankan babel 6 secara default. Babel 6 tidak mencari file .babelrc.js . Hanya untuk file .babelrc . Jika Anda memiliki konfigurasi JS alih-alih JSON, itu tidak akan membaca konfigurasi dan karenanya tidak menggunakan plugin apa pun. Ini menghasilkan unexpected token: import untuk saya.
• babel-7-jest berjalan pada mesin inti Babel 7 yang lama, sehingga menghentikan dukungan untuk plugin proposal yang lebih baru.
• Tampaknya npm i -D [email protected] MEMPERBAIKI MASALAH SEPENUHNYA . Saya bahkan tidak memiliki env.test di konfigurasi babel saya, saya juga tidak memiliki konfigurasi lelucon.

Sepertinya Jest mencari babel-core (dan dengan demikian mengabaikan @babel/core ), jika tidak, ia akan kembali ke Babel 6 dan melewatkan konfigurasi Anda. Tetapi ketika babel-core (versi bridge) terbaru diinstal, ia mem-parsing modul ES6 tanpa konfigurasi tambahan.

Terima kasih kasvtv! Mengubah .babelrc.js menjadi .babelrc dan menginstal npm i -D [email protected] . Sekarang pengujian saya berjalan dengan babel-jest

Anda dapat menggunakan file konfigurasi .js dengan aman. Hanya saja Babel hanya membaca jenis file ini dari versi 7 dan seterusnya dan Anda memerlukan [email protected] agar Jest dapat menggunakan Babel versi 7.

Jika ada yang tertarik, saya membuat tes lelucon + enzim saya berfungsi. Jangan ragu untuk menyodok ke file konfigurasi yang sesuai. Juga, adakah yang tertarik membantu pengembangan frontend untuk proyek yang sama?

Punya masalah serupa karena perpustakaan antd dan rc-calendar dll. gagal mengimpor modul, solusinya adalah mengkonfigurasi transformIgnorePatterns

transformIgnorePatterns: [ 'node_modules/?!(antd|rc-.+)/' ],

Mungkin moduleDirectories membantu:

moduleDirectories: ['node_modules'],

Saya memperbarui ke versi asli reaksi terbaru dan harus memperbarui ke babel 7 dan sekarang saya mendapatkan kesalahan yang sama.

Menambahkan node_modules ini ke transformIgnorePatterns sepertinya tidak melakukan apa-apa lagi.

Dalam kasus saya, itu karena saya tidak lagi mentranspilasikan modul dengan Babel, dan ada catatan di panduan memulai tentang menambahkannya kembali ke bagian test dari babelrc Anda.

@kasvtv @willb335 Saya menggunakan trik agar Babel 6 mengenali .babelrc.js:

package.json

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },

Saya menemui masalah yang sama dengan menggunakan @material/base library, adakah yang bisa memberikan file package.json & .babelrc untuk dipecahkan. Saya mencoba umpan balik di atas, tetapi saya bingung ...

solusi bagi saya adalah menambahkan preset "env" pada file .babelrc sehingga menjadi seperti ini
{
"preset": ["env", "es2016", "stage-0", "bereaksi"]
}

Menggunakan info tautan ini menyelesaikan masalah saya
https://jestjs.io/docs/en/webpack.html

@negarineh tautan Anda tidak berfungsi

Menggunakan solusi transformIgnorePatterns disediakan oleh @haywirez ternyata saya

SyntaxError: Unexpected token import

kesalahan menjadi sebuah

TypeError: Cannot read property 'DocumentDir' of undefined

kesalahan. Yaitu paket (rn-fetch-blob) sekarang tidak terdefinisi.

Sunting:

sebenarnya hanya menambahkan transformIgnorePatterns: [], ke jest.config.js menyebabkan SyntaxError berubah ke TypeError.

@schhumannd Maaf saya membuat kesalahan, tautannya mengarahkan Anda ke halaman sekarang. Jika Anda mengatur "jest.config.js" Anda dengan konfigurasi yang disediakan di tautan, itu akan berfungsi.
Jika kesalahannya adalah tentang mengimpor file .css menambahkan file tiruan seperti contoh di tautan atau hanya dengan menginstal "identity-obj-proxy" dengan konfigurasi ini seharusnya berfungsi:

npm install --save-dev identity-obj-proxy

jest.config.js (untuk Modul CSS):

{ "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|less)$": "identity-obj-proxy" } } }

Juga, ini adalah file .babelrc saya di direktori root proyek ( test.config.js juga harus di root):

Pertama, untuk menggunakan babel install "babel-jest" dan "regenerator-runtime":

npm --dev babel-jest babel-core regenerator-runtime

Kemudian tambahkan konfigurasi ini ke file .babelrc:

{ "presets": ["env", "react"], "plugins": ["transform-class-properties"], "env": { "production": { "plugins": ["transform-es2015-modules-commonjs"] }, "test": { "presets": ["env", "react"], "plugins": ["transform-export-extensions"], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } } }

Semoga ini membantu.
https://jestjs.io/docs/en/webpack.html

Dalam kasus saya, ini berfungsi setelah menambahkan .babelrc

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

dan kemudian jalankan tes menggunakan NODE_ENV=test jest

Ini hanya akan membantu BEBERAPA orang.

Masalah saya adalah karena lelucon tidak dapat mengurai file JS saya. Saya menggunakan require sebagai gantinya.

Teman-teman. Tak satu pun dari solusi ini bekerja karena saya tidak punya file aa babelrc... hanya babel.config.js. Tolong, bagaimana Anda memperbaikinya dengan babel.config.js? Terima kasih

Mencoba banyak hal dari diskusi di atas dengan konfigurasi babel serta beberapa opsi tambahan dari pencarian lain (seperti opsi esm ) - tidak ada yang berhasil. Kata kunci impor terus memberikan kesalahan dari lelucon. Sangat menyedihkan bahwa menguji modul dengan impor es6 sangat sulit.

Akhirnya inilah yang berhasil untuk saya: ts-jest

Sekarang, saya tidak menggunakan TypeScript dalam kode saya seperti itu, namun menggunakan ts-jest semuanya sama (karena TypeScript secara internal memiliki dukungan untuk impor dan semua hal lainnya). Ini hanya untuk membuat lelucon memahami kode javascript dengan benar.

Ikuti langkah-langkah ini:
npm i -D jest typescript ts-jest @types/jest
Dalam file jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest mungkin mengeluh tentang TypeScript yang tidak mengizinkan file js untuk dipatuhi. Tambahkan file tsconfig.json dengan opsi di bawah ini:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Menghapus semua konfigurasi dan file terkait babel . Konfigurasi npm terlihat seperti di bawah ini:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
Semoga ini bisa membantu siapa pun yang menghadapi masalah serupa dengan impor.

Adakah yang punya repo tulang telanjang yang memiliki pengaturan kerja menggunakan impor JS?

Adakah yang punya repo tulang telanjang yang memiliki pengaturan kerja menggunakan impor JS?

https://github.com/kasvtv/react-starter

Sebagai seseorang yang menemukan halaman ini saat mencari masalah serupa yang mungkin tidak relevan dengan diskusi awal. Masalah saya akhirnya karena menggunakan impor dinamis seperti fungsi yang dijelaskan oleh https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. Ini akhirnya diselesaikan dengan menambahkan plugin babel untuk fitur ini yang tersedia di https://github.com/airbnb/babel-plugin-dynamic-import-node dan memodifikasi .babelrc yang sesuai.

{
    ...
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    ...
}

saya baru saja menghapus opsi :{ module:false }, dan kemudian berhasil

"presets": [
    ["@babel/env", {module: false} ],  
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]

menambahkan transformIgnorePatterns: [] ke jest config dan transform-es2015-modules-commonjs ke babelrc memecahkan masalah bagi saya.
lelucon: ^23.1.0,
babel: 6.26.3

@ngmgit tetapi ini berarti Anda mengubah semua node_modules Anda, yang tidak terlalu optimal ...

Dalam kasus saya,
.babelrc tidak berfungsi tetapi saya memecahkan masalah dengan memindahkan pengaturan yang sama di .babelrc ke babel.config.js .

semoga membantu!

Tak satu pun dari SEMUA yang ada di sini bekerja untuk saya. Saya tidak percaya bahwa perpustakaan pengujian resmi facebook untuk menguji aplikasi React adalah tingkat yang sulit untuk dikonfigurasi, saya seorang pengembang dengan pengalaman 8+ tahun dan saya menghabiskan 5 jam hari saya tanpa hasil melalui begitu banyak masalah dan pertanyaan pada tumpukan overflow.

saya hanya tidak dapat mengonfigurasi aplikasi reaksi saya untuk bekerja dengan lelucon + perpustakaan pengujian reaksi

ini HANYA karena lelucon meneriakkan setiap kali kepada saya kesalahan sintaks baru yang tidak dapat dia proses. Setiap plugin yang saya gunakan memecahkan satu masalah dan memberikan yang lain. Adakah cara untuk membuat babel menangani semuanya?

Saya dengan tulus selesai dengan itu saya benar-benar menyerah, saya tidak lagi menghabiskan lebih banyak waktu untuk itu, saya mungkin akan membatalkan penambahan perpustakaan ini pada proyek.

Serius, sangat aneh untuk melihat bahwa TIDAK ADA konfigurasi default untuk SIAPAPUN yang ingin menguji aplikasi reaksi menggunakan jest + react-testing-library.

setelah berjam-jam coba-coba dengan banyak jawaban SO dan masalah github, jawaban @cpojer berhasil untuk saya! 🙏

DIPERBARUI dengan yang terbaru dan terbaik dengan beberapa konteks tambahan yang membantu saya:

babel.config.js

module.exports = {
  "env": {
    "production": {
-      "plugins": ["transform-es2015-modules-commonjs"]
# new kid on the block
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

jest.config.js

module.exports = {
  // if you're also using typescript
  preset: "ts-jest",
  testEnvironment: "node",
  verbose: true,
  // registers babel.config.js with jest
  transform: {
    "^.+\\.js$": "babel-jest",
  },
  // explicitly include any node libs using ESM modules
  transformIgnorePatterns: ["node_modules/?!(<ESM module here>|<another here>|<etc...>)"],
}

Dependensi:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (untuk TypeScript)

Masalah ini juga dapat terjadi ketika tidak menjalankan lelucon di direktori root proyek...

Jika Anda menggunakan react-native atau jest-expo preset dan memiliki .js file dalam proyek Anda, Anda harus mengatur transform untuk mencocokkannya di jest config.
Saya menggunakan ekspresi dari https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer--pathtotransformer-object dan berhasil.

transform: { '^.+\\.[jt]sx?$': 'babel-jest' }

dukungan pnpm

Saya ingin meninggalkan catatan di sini untuk pengguna pnpm ....

Contoh berikut tidak berfungsi untuk pengguna pnpm karena jalur pnpm berbeda. Regex di atas hanya berfungsi dengan dir node_modules diratakan.

/xxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/input/String

Lihat: https://regexr.com/5cs2h

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns -kustomisasi

Memperbaiki

Gunakan pandangan ke depan negatif untuk kejadian terakhir dengan menambahkan .* .

node_modules/(?!(.*antd/es)/)