Jest: "خطأ في بناء الجملة: رمز مميز غير صالح أو غير متوقع" مع .png

تحقق من http://facebook.github.io/jest/docs/tutorial-webpack.html#content

تحرير: الرابط الجديد هو https://jestjs.io/docs/en/webpack

@ matheusml هل قمت بحل هذا على الإطلاق؟ cpojer يمكنني أن أؤكد أنني أواجه هذه المشكلة أيضًا. لدي أصول ثابتة خارج مصدري. على سبيل المثال ، يبدو هيكل الدليل الخاص بي كما يلي:

|-fonts
|-img
\_styles
src
|-components
|-pages
...

يبدو تكوين jest الخاص بي مشابهًا للمثال الوارد في الرابط:

"jest": {
    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
    }
  }

فشل الاختبار الخاص بي عندما يحاول استيراد الصورة:

import thumbnail from 'img/thumbnail.png'

أعتقد أنه من المهم ملاحظة أنه إذا لم أقم بتضمين الدليل public في moduleDirectories ، فسأحصل على الخطأ: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

هل هذا متوقع؟ هل يجب أن يتحقق بالفعل من وجود حدث استيراد على الرغم من أن تعيين الوحدة النمطية قد تم إعداده بالفعل؟ وإلا سأحصل على نفس الخطأ أعلاه. لم أجرب أي نوع آخر من الاستيراد في مخطط الاسم.

أواجه نفس المشكلة ، أحاول تنفيذ عرض خادم رد فعل. أي إصلاح لهذا.

لقد وضعت هذا في برنامج babelrc الخاص بي ويبدو أن الأمور تعمل:

{
"الإعدادات المسبقة": ["es2015"، "رد فعل"]
}

نفس النوع خطأ

SyntaxError: Unexpected token <
      /media/sibin/F_WORK/<path>/<icon-name>.svg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                               ^
      SyntaxError: Unexpected token <

يبدو أنني أواجه هذه المشكلة أيضًا. يحدث ذلك فقط عندما أطلب ملف png.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

نفس الخطأ كذلك. هل يقوم أحد بإصلاحها؟

لديك نفس الخطأ مع mp3 ، لا شيء يساعد

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

لقد واجهت الخطأ نفسه وقمت بحلته من خلال إنشاء أصول محولات .

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

ثم أضف هذا إلى تهيئة jest في package.json:
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js", "\\.(css|less)$": "<rootDir>/assetsTransformer.js" } },

المصدر: https://facebook.github.io/jest/docs/webpack.html#content

في حالتي ، لم أدرك أن <rootDir> هو رمز تم توفيره بواسطة Jest ، وافترضت أنه كان شيئًا أحتاج إلى استبداله. أدت إضافته إلى إدخالات moduleNameMapper إلى حل المشكلة.

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

بي إن جي:

 FAIL  components/__tests__/List.js
  ● Test suite failed to run

    /assets/images/logo-header.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (components/PageHeader.js:15:19)
      at Object.<anonymous> (components/Main.js:10:436)

SVG:

 FAIL  ui/Button/__tests__/snapshot.test.js
  ● fixture 'TextAndIcon' snapshots are rendered correctly

    /assets/icons/fontawesome/regular.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Icon (ui/Icon.js:31:17)
      at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2599:14)
      at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
      at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
      at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)

هيكل مجلدي هو في الأساس:

<rootDir>
  assets
    *.png, *.svg, ...
  components
    *.js
  ui
    *.js

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

.babelrc:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1",
    ["env", {
      "targets": {
        "browsers": [
          "last 3 versions",
          "> 1%",
          "Firefox ESR",
          "iOS 9"
        ]
      }
    }]

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

package.json:

  "jest": {
    "snapshotSerializers": [
      "jest-glamor-react",
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": ["js"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/assetsTransformer.js"
    }
  },

أنا غبي ، كان لدي jest.config.js آخر في مجلد الجذر الخاص بي والذي قام بالكتابة فوق الإعدادات في package.json . على الرغم من أنه لم يتم تشغيله بعد ، إلا أنني لم أحصل على هذا الخطأ المحدد بعد الآن.

حصلت على العمل. فيما يلي الأجزاء المهمة (يرجى ملاحظة أن لدي بعض التكوين الإضافي بسبب الإنزيم 3 مع رد الفعل 16):

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "env"

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
  }
}

jest.config.js

// this helps: https://github.com/facebook/jest/issues/2081#issuecomment-332406033
module.exports = {
  verbose: true,
  setupFiles: ['./jest.setup.js'],
  snapshotSerializers: ['jest-glamor-react', 'enzyme-to-json/serializer'],
  moduleFileExtensions: ['js', 'jsx'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/config/jest/assetsTransformer.js',
  },
};

jest.setup.js

import 'raf/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

أتمنى أن يساعد ذلك شخص ما.

كنت أواجه مشكلات مع ملف svg . أدركت أنه يمكنني السخرية منه باستخدام identity-obj-proxy :

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },

لأي شخص يبحث في هذه المشكلة ، فإن طريقة Timgivois تعمل بشكل جميل بالنسبة لي. يجب عليك تثبيت npm install --save-dev identity-obj-proxy للحصول على التبعيات الضرورية.

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

بينما يعمل الحل بواسطة mbaranovski ، لا أعرف ما إذا كان ينوي استخدامه كمحول. ينتج الناتج التالي (انتبه إلى السمة src):

<img alt="ImgName" height="28" src={ Object { "process": [Function], } } width="112" />

بشكل أساسي ، يتم تعيين كل شيء من تلك الوحدة إلى المكان الذي طلبت فيه SVG. وبالتالي ، يمكنك التخلص من هذه الوحدة ببساطة وهي:

module.exports = {}

الحل الآخر كما هو مذكور أعلاه هو استخدام وكيل الهوية.

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

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

إنه يوفر لي يومي. شكرا!!.

mbaranovski لقد عملت بشكل جيد عندما ركضت مازحة للاختبار فقط. للأسف عندما أحاول تشغيل نصوص رد الفعل من تطبيق create-response-app أحصل عليه

Out of the box, Create React App only supports overriding these Jest options

هل هناك حل لهذا؟ أم أن الحل الوحيد هو إخراج تطبيق create-response-app؟

لا أعتقد أن CRA تدعم هذا الخيار. لست متأكدًا من سبب رغبتها في إغلاق الخيارات ، ربما يكون سببًا جيدًا

/ سم مكعب gaearon

حل آخر:

npm i --save-dev jest-transform-stub

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

لدي وحدة أصلية للتفاعل بها صور. لقد حاولت استخدام assetsTransformer و identity-obj-proxy و jest-transform-stub . يعمل محول الأصول فقط.

مرحبًا @ sibinx7 لقد أصلحت هذه المشكلة عن طريق: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

لقد قمت بحل هذا باستخدام حزمة jest-react-native ، حيث أن جميع الحلول هنا لم تنجح بالنسبة لي. ربما تكون مشكلتي مختلفة ، لأنني واجهت مشاكل مع ملفات PNG الموجودة داخل حزمة react-native-router-flux .

إليك بعض أجزاء من ملف package.json الخاص بي:

{
  // ... 
  "devDependencies": {
    // ...
    "jest": "^23.4.1",
    "jest-react-native": "^18.0.0",
  },
  "jest": {
    "preset": "jest-react-native",
    "verbose": true,
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/react-native/Libraries/react-native/",
      "<rootDir>/node_modules/react-native/packager/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|react-navigation|react-native-router-flux))"
    ]
  },
  // ...
}

تعديل طفيف للتعامل مع ملفات xml ، في هذه الحالة باستخدام خيار التحويل :

jest.config.js

module.exports = {
    transform: {
        ".+.(xml|bpmn)": "<rootDir>/src/__tests__/transformers/xmlTransformer.ts"
    },
}

/src/__tests__/transformers/xmlTransformer.ts (قد تحتاج إلى تعديل في مسارك ،هو المساعد الذي يمثل الدليل الجذر للمشروع).

module.exports = {
    process() {
        return 'module.exports = {};';
    },
    getCacheKey() {
        // The output is always the same.
        return 'xmlTransform';
    },
};

انظر هنا لمزيد من التفاصيل.

تحقق من http://facebook.github.io/jest/docs/tutorial-webpack.html#content

الارتباط المعطى معطل

https://jestjs.io/docs/en/webpack

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

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

إنه يوفر لي يومي. شكرا!!.

أخذت إشارة من هذا وقمت بتثبيت babel-jest ثم استبدلت identity-obj-proxy بـ babel-jest

أو استخدم هذا https://github.com/eddyerburgh/jest-transform-stub

لقد نجح حل eddyerburgh فقط بالنسبة لي.

تضمين التغريدة
يمكنك حفظ يومي ، إنه يعمل بشكل جيد

واجهت مشكلة png هذه بعد إضافة ./node_modules/react-native-gesture-handler/jestSetup.js إلى setupFiles (كانت تلك محاولتي لحل مشكلة الدعابة مع react-native-gesture-handler ).

لقد جربت https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( magnusart باستخدام identity-obj-proxy ) ، لكنها كسرت enzyme لأي سبب من الأسباب (جعلت enzyme 's mock في رمز بدلاً من وظيفة). ثم حاولت https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (eddyerburgh @
باستخدام jest-transform-stub ) ، لكنها لم تفعل شيئًا.

في النهاية ، جربت https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( cpojer ، حل webpack في البداية) ، وكان هذا هو الحل الوحيد المناسب لي.

إذا حصل أي شخص على هذا الخطأ مع SVG ، فربما يمكنه استخدام هذا lib ، فقد نجح بالفعل بالنسبة لي https://www.npmjs.com/package/jest-svg-transformer

لقد أضفت فقط هذا الرمز في ملفي jest.config.ts

transform: { '^.+\\.tsx?$': 'babel-jest', '^.+\\.svg$': 'jest-svg-transformer', },

والرمز الموجود في هذا الملف هو هذا

يمكنكم تجاهل moduleNameMapper يا رفاق ، وذلك فقط لأنني أستخدم الاستيراد المخصص مع babel