Jest: استيراد رمز غير متوقع لوحدات ES6 النمطية

لدي نفس المشكلة مع React-Native و Jest ،
إذا بدأت مشروعًا جديدًا باستخدام:
رد فعل أصلي init AwesomeProject
مشروع رائع cd

ثم قم بتثبيت وحدة مثل npm install native-base - save
استيراد أي مكون من original-base إلى ملف index.ios.js الخاص بك

سيؤدي اختبار npm إلى ظهور هذا الخطأ:
../test/node_modules/native-base/index.js:4
استيراد درج من "./Components/vendor/react-native-drawer" ؛
^ ^ ^ ^ ^ ^
خطأ في بناء الجملة: استيراد رمز غير متوقع

راجع http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -customization

أواجه نفس المشكلة، وcpojer الرابط المقدم لا يبدو أن مساعدة 😕

أهلا! 'convertIgnorePatterns' يفعل .... mmmm ... يجب أن يفعل - تجاهل)
ولكن كيف يمكنني استخدام هذا الاستيراد في الحزمة من node_modules؟

ساعدتني هذه الدعائم :)

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

محدث 1
حاليًا ، تكوين Jest الخاص بي هو:

"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"
    ]
  },

... وهو يعمل بالنسبة لي :)

مع أطيب التحيات ، بافل تريتياكوف

مرحبًا يا شباب ، ما زلت أتعامل مع هذه المشكلة ، لكنني لا أستخدم رد الفعل الأصلي. يتم إصلاح المشكلة دائمًا باستخدام jest - no-cache. هل هناك طريقة لجعل المزاح يعمل باستخدام ذاكرة التخزين المؤقت ، دون إلقاء هذا الخطأ؟

لا يمكنني الحصول على هذا التحويل للعمل مع تطبيق إنشاء تفاعل. احصل دائمًا على "استيراد رمز مميز غير متوقع" على أي ملفات اختبار تحتوي على استيراد ES6. لقد جربت كل الاقتراحات التي يمكن أن أجدها. no-cache ليس له تأثير. من الواضح أنني لا أستطيع تجاهل هذه الملفات من التحويل (يجب تحويلها!).

أستسلم. يسعدني تقديم أي معلومات مطلوبة.

يبدو أنني أواجه هذه المشكلة أيضًا.

كذلك هنا

كذلك هنا

من المحتمل أنك تواجه هذه المشكلة نظرًا لأن وحدات ES النمطية غير مدعومة في Node وتوقفت عن تجميعها باستخدام خط أنابيب البناء (حزمة الويب ، مجموعة التحديثات) عندما تقوم بشحنها إلى المتصفح.

تحتاج إلى تمكين التجميع من وحدات ES إلى CommonJS من أجل بيئة "الاختبار" في babelrc ، راجع https://babeljs.io/docs/usage/babelrc/#env -option و https://babeljs.io/docs/ الإضافات / transform-es2015-modules-commonjs /

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

شكرا لردك ، cpojer. بالأمس قمت بإزالة إعدادات env العقدة الخاصة بي وتركتها تعمل مع بيئة العقدة الافتراضية ، لأن المزاح كان يعمل على مستوى العالم ، ولكن ليس أثناء استخدام البرامج النصية للعقدة. يبدو أنه يحل المشكلة ، لذلك أعتقد أن مشكلتي كانت مع إعدادات node-env. لكنها لا تزال شيئًا يجب مراقبته.

تحرير: هذا لم يعمل على الإطلاق. عمل إصلاح cpojer مثل السحر. شكرا.

نجح إصلاح

رائع ، لقد عملت أيضًا من أجلي ، شكرًا!

أواجه مشكلة مماثلة في تطبيقي الأصلي البسيط إلى حد ما.

عند تشغيل npm test أو jest يتم إرجاع هذا '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"
  }
}

هل يوجد مقتطف env الذي اقترحه cpojer في حزمة.
آسف إذا كان واضحا حقا!
أي مساعدة ستكون رائعة ، شكرا

JessicaBarclay يجب أن تذهب في التكوين الخاص بك. مثله:

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

آه شكرا لك @ rlage ! مرتبة :)

FWIW ، لقد قمت بالفعل بإعداد .babelrc باستخدام presets و plugins تحت بيئة اختبار مثل cpojer التي اقترحها ، لكني نسيت تضمين NODE_ENV=test على سطر البرامج النصية الخاصة بي في package.json .

قبل ذلك ، فشل "استيراد رمز مميز غير متوقع":

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

بعد تحويل الملفات بنجاح:

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

تضمين التغريدة

استنادًا إلى Jest doc ، لن تكون هناك حاجة إليه ، نظرًا لأن Jest يعيّن NODE_ENV للاختبار حسب الافتراض.

ملاحظة: إذا كنت تستخدم تكوين Babel أكثر تعقيدًا ، باستخدام خيار env في Babel ، ضع في اعتبارك أن Jest سيعرف NODE_ENV تلقائيًا كاختبار. لن يستخدم قسم التطوير مثل Babel بشكل افتراضي عندما لا يتم تعيين NODE_ENV.

هذا .babelrc هو ما نجح معي:

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

ملاحظة: يبدو الأمر غريبًا ، ولكن يجب أن تكون مفاتيح التطوير والاختبار موجودة ، وإلا فلن تعمل.

ثم أتصل فقط:

node_modules/.bin/jest

أو مع package.json:

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

لا حاجة لضبط NODE_ENV للاختبار.

laszbalo من المثير للاهتمام ، أن وجود ذلك env يبدو أنه يفي بالغرض. إذا أضفت بيئة تطوير وأزلت البادئة NODE_ENV الصريحة في البرامج النصية الخاصة بي ، فستعمل. لقد قرأت هذا الجزء من المستندات أيضًا ، ولكن انتهى بي الأمر بهذا الحل لأنه نجح.

jlyman أي حل في المستندات؟

doudounannan آسف إذا لم يكن ذلك واضحًا. كان الحل الذي انتهيت إليه هو ما نشرته هنا . كما قال laszbalo ، فإنه يتعارض مع ما يقوله المستندات تحت استخدام Babel ، ولكن يبدو أن حل حقني المباشر NODE_ENV test يعمل.

الغريب عندما أستخدم "transformIgnorePatterns": [ ] فسيقوم بابل بتحويل ملفاتي المختبرة ، ولكن إذا استبعدت الخيار transformIgnorePatterns فإن بابل لا تفعل أي شيء ... لدي babelrc بسيط للاختبار فقط (أنا استخدم webpack للإنتاج ، ولكن ليس لاختبارات المرح):

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

حصلت على الفكرة من https://github.com/facebook/jest/issues/2550#issuecomment -290812720 حيث لا شيء آخر في # 770 أو هنا يبدو أنه يساعد ...

لا يهم ما أفعله ، إنه دائمًا نفس الخطأ:

    /.../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$"
}

لدي نفس المشكلة. أضفت ما يلي إلى مازحتي

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

والآن أتلقى الخطأ التالي عند تشغيل Jest:

ReferenceError: المكوِّن الإضافي غير المعروف "transform-replace-object-assign" المحددة في "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" عند 0 ، حاولت حلها بالنسبة إلى "/ Users / caalcaz / المستندات / المشاريع / Enterprise-app / node_modules / enzyme "

@ calcazar ماذا يوجد في node_modules / enzyme / .babelrc؟

لقد قمت بحلها باستخدام babel-jest _and_ ts-jest. في 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
},

ثم في .babelrc (الذي لا أستخدمه إلا للاختبار)

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

آمل أن يساعد ذلك شخصًا ما! (هذا لتطبيق aurelia لذا YMMV)

تضمين التغريدة

هذا ما أراه. لمعلوماتك ، فأنا أقوم بتشغيل Enzyme V3.0

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

thinkOfaNumber شكرا لك على نشر اقتراحك. لقد استخدمتها لمعرفة كيفية الحصول على وحدات es6 من مكتبة خارجية ليتم تجميعها بطريقة دعابة. المفتاح هنا

"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

هذا هو الجزء الذي أحتاجه. شكرا جزيلا!

rochapablo في نفس المكان. أي حظ؟

Noop ، في الوقت الحالي ، أتجاهل اختبار الملف المحدد الذي تسبب في حدوث الخطأ

التالية. لدي نفس المشكلة ولا يوجد شيء حتى الآن يبدو أنه يحلها.

متابعة أيضا

rochapablo هل
لا يمكنني أيضًا اختبار المكون الذي يحتوي على GiftedChat كطفل بسبب المشكلة التي ذكرتها ...

todorone ، حاول إضافة:

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

rochapablo شكرًا على التلميح ، لكن للأسف لم يساعد. حتى أنني حاولت اللعب أكثر باستخدام regexes transformIgnorePatterns لكن ذلك لم يساعد.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
أضف ما ورد أعلاه إلى الدعابة

rochapablo هل جربت الإعداد المسبق jest-expo ؟ أي حظ؟ واجهت مشكلة أخرى في بناء الجملة معها & transformIgnorePatterns

ما زلت لا تعمل من أجلي. لقد تلقيت خطأ الاستيراد اللعين.

testacode هذا ديناميكي import ، هل أضفت المكون الإضافي babel الضروري؟ انظر أسفل https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

SimenB شكرا ، هذا ما كنت في عداد المفقودين!

إنه شيق. قام بعض التحديث الأخير بإزالة الإضافة التلقائية لـ babel-jest. لذلك يجري:

npm install babel-jest --save-dev

وإضافة أي شيء آخر في التكوين حل المشكلة بالنسبة لي. أعتقد أنه يجب أن يكون أكثر وضوحًا في رسالة الخطأ أنه لم يعد مضمنًا ...

لقد قمت بحلها فقط عن طريق تثبيت babel-jest:
npm i babel-jest

أيضًا ، لا تنس إنشاء ملف .babelrc بالمحتوى التالي:

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

هذا يناسبني:

.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 لقد

بالنسبة لي ، كان لدي هذا في ملف .babelrc :

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

وكنت بحاجة فقط للتأكد من أن بيئة "الاختبار" تستخدم وحدات بدلاً من ذلك:

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

nemoDreamer من الأفضل عدم تكرار الملحقات

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

مهما حاولت ، حصلت على خطأ.

> 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

ها هي ملفات التكوين الخاصة بي.

* .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

عند تعيين الإعداد المسبق على .babelrc ، تأكد من أن "env" بين قوسين ["env"] ، على النحو التالي:

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

خاصة إذا كان لديك "modules: false" في التكوين الخاص بك.

أيضًا ، بشكل افتراضي ، لا يحول jest الملفات الموجودة في node_modules ، cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

هذا هو السبب في أن أي import ... لن يعمل في ملفات node_modules . لتعطيل هذا ، يمكنك إضافة:

transformIgnorePatterns: []

إلى التكوين الدعابة الخاص بك.

أتمنى أن يساعدك هذا!

florentchauveau شكرا ، هذا العمل بالنسبة لي.

todoronerochapablo هل الرجال إيجاد حل لهذا؟ حتى أنا أواجه نفس المشكلة-

    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)

أتلقى هذا الخطأ فقط في اختبارات المكونات التي تستخدم
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
ربما يكون هذا بسبب شحن @expo/react-native-action-sheet كوحدة ES6 و GiftedChat يستخدمها داخليًا؟ لكن jest / ts-jest (لست متأكدًا) يجب أن يتعامل مع ذلك إذا تمت إضافة الإعدادات المسبقة. هنا هو تكوين Jest الخاص بي -

    "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"
    },

و .babelrc -

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

لقد جربت جميع الحلول المذكورة أعلاه تقريبًا. لم يعمل أي منهم في السيناريو الخاص بي. المساعدة المطلوبة.

@ omkarjoshi-cc كان الشيء الوحيد الذي نجح معي في الوقت الذي كنت أعمل فيه هو إضافة الحزمة التي كانت تطلق الخطأ ، والتي في حالتي كانت:

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

تضمين التغريدة حاولت ذلك. لم يعمل. هل هناك شيء آخر قد يكون مفقودًا؟ هذا محبط حقًا 😓

أنا أستخدم babel 7 وأنا أيضًا لم يحالفني الحظ مع "transformIgnorePatterns" - جربت العديد من التعبيرات النمطية المختلفة: /

المشكلة التي لدي هي أن تبعية واحدة بها فئات es6 أصلية ، ولدي فصل في مصدري يعمل على توسيعه. نظرًا لأن "فئات es5" التي تم نقلها بواسطة Babel لا يمكنها توسيع فئة أصلية ، فإنني أحصل على خطأ في وقت التشغيل من باب الدعابة.

بدأت أعتقد أن "babel / preset-env" بطريقة ما تعيق كيفية تحويل الشفرة إلى jest (العقدة المستهدفة) ، والتي قد لا تتبع أهداف المتصفح ، ولكن لا تزال غير متأكد من ذلك.

هل يعرف أي شخص كيفية إجبار كل شيء على es5 على سبيل الدعابة عند استخدام "الحاضر - env" في .babelrc؟

الحل الوحيد الذي يمكنني التفكير فيه هو عدم استخدام babel-jest ، وتشغيل حزمة الويب (التي تستخدم أداة تحميل babel ، والقواعد التي يتم تحويل الملفات إليها تعمل بالنسبة لي) ، ثم تشغيل المزاح -> أفكر في استخدام webpack -w ومازح مشاهدة المنقول ..)

مضيفا

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

عملت من أجلي. بفضل rochapablo 🙌

أنا أعاني من هذه المشكلة. هل يجب أن يكون مجلد الإخراج الخاص بي الذي يتم اختباره هو بناء جملة ES6 مع import وما إلى ذلك أم لا يمكنني المزاح ألا يختبر ذلك؟ لا أرى أي ملفات Commonjs في ملف الإخراج / الملفات الخاصة بي (باستخدامه مع التفاعل الأصلي)

أواجه نفس المشكلة وهذه الصفحة تحل المشكلة:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

لسبب ما ، بدلاً من babel-jest ، فإن استخدام ما يلي جعلها تعمل بالنسبة لي (مع مراعاة transformIgnorePatterns ما يبدو)

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

راجع للشغل يجب إعادة فتح هذه المشكلة هنا ، أليس كذلك؟ كثير من الناس يواجهون صعوبات

في حالتي ، اتضح أن سبب هذه المشكلة هو تجاهل ملفات الاختبار في تكوين بابل الخاص بي. لأسباب غير ذات صلة ، كان لدي "ignore": ["**/*.test.js"] في .babelrc الخاص بي.

كان الحل هو تعيين خيار التجاهل لبيئة الإنتاج فقط ، أي:

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

بدلاً من ذلك ، يمكنك تحديد نمط تجاهل خاص لبيئة الاختبار.

بعد كثرة المحاولات ، ها هي حالتي

1. تأكد من أن لديك الإصدارات الصحيحة من babe-jest *
2. تأكد من أن يكون لديك تكوين .babelrc مع الإعدادات المسبقة (مثبتة مسبقًا)
3. إذا كان الخطأ "رمز غير متوقع" لا يزال موجودًا ، فربما تكون وظائف السهم غير قابلة لإعادة الاتصال ، فسيساعدك هذا المكون الإضافي babel على "تحويل خصائص الفئة" أيضًا إلى تكوين babel الخاص بك.

هنا هي التكوينات الخاصة بي.

.babelrc

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

للإنزيم (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 نجحت إضافة هذا بالنسبة لي

في حالتي ، كانت مشكلة في Windows وأذوناتها الغبية ، وربما لم يتم تعيين متغيرات env بشكل صحيح.
تم التبديل من git bash إلى cmd.exe مرتفع وبدأ العمل مرة أخرى.

تم تعريف jest على أنه script (تمت إعادة تسميته test:jest ليصبح test ) ، في package.json . ومع ذلك ، عند تشغيل npm run test ، أحصل على 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

لقد حددت أيضًا 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'
  ]
}

أرى الكثير من الأشياء حول react-native و transformIgnorePatterns . لحسن الحظ ، ولسوء الحظ ، لا أستخدم ذلك. يا له من خطأ مراوغ هذا. هل أحتاج إلى تحديد .babelrc ، أو إضافة توجيه jest في package.json . كيف يعرف مازحتي script عن بابل ، إذا كان هذا هو الحال؟ لقد حاولت إضافة .babelrc ، في نفس الدليل الذي يحتوي على package.json ، بدون حظ:

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

ملاحظة: إذا كان أي شخص يريد أن تتبع بلدي الأصلي قضية تتعلق المشكلة أعلاه.

بعد الكثير من العبث ، وجدت المشكلات التالية:

• يدير Jest بابل 6 افتراضيًا. لا يبحث Babel 6 عن ملف .babelrc.js . فقط لملف .babelrc . إذا كان لديك تكوين JS بدلاً من JSON ، فلن يقرأ التكوين وبالتالي لا يستخدم أي مكونات إضافية. نتج عن هذا unexpected token: import بالنسبة لي.
• babel-7-jest على محرك Babel 7 الأساسي القديم ، وبالتالي كسر الدعم لأحدث المكونات الإضافية للمقترحات.
• يبدو أن npm i -D [email protected] يصلح المشكلة تمامًا . ليس لدي حتى env.test في تكوين بابل الخاص بي ، وليس لدي أي تكوين مزاح.

يبدو كما لو أن Jest يبحث عن babel-core (وبالتالي يتجاهل @babel/core ) ، وإلا فإنه يعود إلى Babel 6 ويتخطى التكوين الخاص بك. ولكن عند تثبيت أحدث إصدار من babel-core (إصدار الجسر) ، فإنه يوزع وحدات ES6 دون أي تهيئة إضافية.

شكرا kasvtv! قمت بتغيير .babelrc.js إلى .babelrc وتثبيت npm i -D [email protected] . تعمل اختباراتي الآن بـ babel-jest

يمكنك استخدام ملف التكوين .js بأمان. كل ما في الأمر أن Babel يقرأ فقط هذا النوع من الملفات من الإصدار 7 فصاعدًا وتحتاج إلى [email protected] لـ

إذا كان أي شخص مهتمًا ، فقد نجحت في إجراء اختبارات المزاح + الإنزيم. لا تتردد في الدخول إلى ملفات التكوين المقابلة. أيضًا ، هل هناك أي شخص مهتم بالمساعدة في تطوير الواجهة الأمامية لنفس المشروع؟

واجهت مشكلة مماثلة بسبب فشل مكتبات antd و rc-calendar إلخ. في استيراد الوحدات النمطية ، كان الحل هو تكوين transformIgnorePatterns

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

ربما ساعد أيضًا moduleDirectories :

moduleDirectories: ['node_modules'],

لقد قمت بالتحديث إلى أحدث إصدار أصلي للرد واضطررت إلى التحديث إلى babel 7 وأحصل الآن على نفس الخطأ.

لا يبدو أن إضافة وحدات node_modules هذه إلى transformIgnorePatterns تفعل أي شيء بعد الآن.

في حالتي ، هذا لأنني لم أعد أقوم بترجمة الوحدات النمطية مع Babel ، وهناك ملاحظة حول دليل البدء حول إضافة ذلك مرة أخرى إلى الجزء test من babelrc الخاص بك.

kasvtv @ willb335 أستخدم خدعة لجعل Babel 6 يتعرف على .babelrc.js:

package.json

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

أواجه نفس المشكلة مع use @ material / base library ، هل يمكن لأي شخص تقديم ملف package.json & .babelrc لحل هذه المشكلة. أحاول التقيمات أعلاه ، لكنني اختلطت ...

كان الحل بالنسبة لي هو إضافة الإعداد المسبق "env" على ملف .babelrc لذلك اتضح مثل هذا
{
"الإعدادات المسبقة": ["env" ، "es2016" ، "stage-0" ، "رد فعل"]
}

باستخدام معلومات الارتباط هذه حل مشكلتي
https://jestjs.io/docs/en/webpack.html

negarineh الرابط الخاص بك لا يعمل

باستخدام الحل transformIgnorePatterns المقدم من haywirez يجعلني

SyntaxError: Unexpected token import

خطأ في

TypeError: Cannot read property 'DocumentDir' of undefined

خطأ. أي الحزمة (rn-fetch-blob) أصبحت الآن غير محددة.

يحرر:

في الواقع ، يؤدي مجرد إضافة transformIgnorePatterns: [], إلى jest.config.js الخاص بي إلى تغيير SyntaxError إلى TypeError.

schumannd آسف لقد ارتكبت خطأ ، الرابط يعيد توجيهك إلى الصفحة الآن. إذا قمت بتعيين "jest.config.js" مع التكوين الذي تم توفيره في الرابط ، فيجب أن يعمل.
إذا كان الخطأ يتعلق باستيراد ملف .css مع إضافة ملف وهمي مثل المثال الموجود في الرابط أو فقط عن طريق تثبيت "هوية obj-proxy" مع هذا التكوين ، فيجب أن يعمل:

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

jest.config.js (لوحدات 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" } } }

أيضًا ، هذا هو ملف .babelrc الخاص بي في الدليل الجذر للمشروع (يجب أن يكون test.config.js أيضًا في الجذر):

أولاً ، لاستخدام babel install "babel-jest" و "regenerator-runtime":

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

ثم أضف هذا التكوين إلى ملف .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" ] } } }

أتمنى أن يساعدك هذا.
https://jestjs.io/docs/en/webpack.html

في حالتي ، يعمل بعد إضافة .babelrc

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

ثم قم بتشغيل الاختبار باستخدام NODE_ENV=test jest

هذا سيساعد فقط بعض الناس.

كانت مشكلتي بسبب عدم تمكني من تحليل ملف JS الخاص بي. استخدمت require بدلاً من ذلك.

رفاق. لا يعمل أي من هذه الحلول لأنني لا أمتلك ملف babelrc ... فقط babel.config.js. من فضلك ، كيف تصلح مع babel.config.js؟ شكرا

جربت أشياء كثيرة من المناقشة أعلاه إلى تكوينات babel بالإضافة إلى بعض الخيارات الإضافية من بحث آخر (مثل esm options) - لم ينجح شيء. استمرت الكلمة الأساسية للاستيراد في إعطاء خطأ من المزاح. إنه لأمر محزن أن اختبار وحدة مع واردات es6 أمر صعب للغاية.

أخيرًا هذا ما نجح معي: ts-jest

الآن ، أنا لا أستخدم أي نص مكتوب في الكود الخاص بي على هذا النحو ، ومع ذلك فقد استخدمت ts-jest بنفس الطريقة (نظرًا لأن الكتابة المطبوعة تدعم داخليًا عمليات الاستيراد وجميع الأشياء الأخرى). هذا فقط لجعل المزاح يفهم كود جافا سكريبت بشكل صحيح.

اتبعت هذه الخطوات:
npm i -D jest typescript ts-jest @types/jest
في الملف jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
قد يشكو Jest من عدم السماح للطباعة باستخدام ملفات js . أضف الملف tsconfig.json بالخيارات التالية:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
تمت إزالة جميع التكوينات والملفات ذات الصلة بـ babel . يبدو تكوين npm كما يلي:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
آمل أن يساعد هذا أي شخص يواجه مشكلة مماثلة مع الواردات.

هل يمتلك أي شخص مستوردًا مكشوفًا يحتوي على إعداد عمل باستخدام واردات JS؟

هل يمتلك أي شخص مستوردًا مكشوفًا يحتوي على إعداد عمل باستخدام واردات JS؟

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

باعتبارك شخصًا عثر على هذه الصفحة أثناء البحث عن مشكلة مماثلة من المحتمل ألا تكون ذات صلة بالمناقشة الأصلية. انتهى الأمر بمشكلتي بسبب استخدام عمليات الاستيراد الديناميكية الشبيهة بالوظيفة التي وصفها https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. انتهى الأمر بحل هذه المشكلة عن طريق إضافة ملحق babel لهذه الميزة المتوفرة على https://github.com/airbnb/babel-plugin-dynamic-import-node وتعديل .babelrc وفقًا لذلك.

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

أنا فقط أزل الخيار: { module: false } ، ثم يعمل

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

أدت إضافة transformIgnorePatterns: [] إلى jest config و transform-es2015-modules-commonjs إلى babelrc إلى حل المشكلة بالنسبة لي.
دعابة: ^ 23.1.0 ،
بابل: 6.26.3

ngmgit لكن هذا يعني أنك تقوم بنقل جميع وحداتك العقدة ، وهو ليس مثاليًا جدًا ...

في حالتي،
.babelrc لا يعمل ولكني قمت بحل المشكلة عن طريق نقل نفس الإعداد في .babelrc إلى babel.config.js .

أتمنى أن تكون قد ساعدت!

لا شيء من كل ما هو موجود هنا يناسبني. لا أستطيع أن أصدق أن مكتبة الاختبارات الرسمية على Facebook لاختبار تطبيقات React هي ذلك المستوى من الصعوبة في التهيئة ، فأنا مطور يتمتع بخبرة تزيد عن 8 سنوات وقضيت 5 ساعات من يومي دون نجاح في حل العديد من المشكلات والأسئلة على تجاوز المكدس.

أنا فقط غير قادر على تكوين تطبيق رد الفعل الخاص بي للعمل مع مكتبة jest + رد فعل-اختبار

هذا فقط لأن المزاح يصرخ في كل مرة لي خطأ نحوي جديد لا يستطيع معالجته. كل مكون إضافي أستخدمه يحل مشكلة ويعطي مشكلة أخرى. هل هناك طريقة لجعل بابل تتعامل مع كل شيء؟

لقد انتهيت بصدق من أنني استسلمت حقًا ، ولم أعد أقضي المزيد من الوقت في ذلك ، وربما ألغي إضافة هذه المكتبة إلى المشروع.

على محمل الجد ، من الغريب جدًا أن نرى أنه لا يوجد تكوين افتراضي لأي شخص يريد اختبار تطبيق تفاعلي باستخدام مكتبة jest + رد فعل-اختبار.

بعد ساعات من التجربة والخطأ مع العديد من إجابات SO ومشكلة جيثب ، cpojer بالنسبة لي! 🙏

تم التحديث مع الأحدث والأفضل مع بعض السياق الإضافي الذي ساعدني:

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...>)"],
}

التبعيات:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (للطباعة)

يمكن أن تحدث هذه المشكلة أيضًا عند عدم تشغيل jest في الدليل الجذر للمشروع ...

إذا كنت تستخدم الإعدادات المسبقة react-native أو jest-expo ولديك ملفات .js في مشروعك ، يجب عليك تعيين transform لمطابقتها في تكوين jest.
لقد استخدمت تعبيرًا من https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer - pathtotransformer-object وعمل.

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

دعم pnpm

أريد ترك ملاحظة هنا لمستخدمي pnpm ....

المثال التالي لا يعمل مع مستخدمي pnpm لأن مسارات pnpm مختلفة. تعمل التنسيقات السابقة فقط مع قيم node_modules المسطحة.

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

انظر: https://regexr.com/5cs2h

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

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns - التخصيص

يصلح

استخدم نظرة سلبية للحدث الأخير عن طريق إضافة .* .

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