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

मेरा मज़ाक config लिंक में दिए गए उदाहरण के समान दिखता है:

"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'

क्या यह अपेक्षित है? क्या यह वास्तव में एक आयात घटना के अस्तित्व को मान्य करना चाहिए, हालांकि मॉड्यूल मैपिंग पहले से ही सेटअप है? अन्यथा मुझे ऊपर की तरह ही त्रुटि मिलती है। मैंने मैपर नाम में किसी अन्य प्रकार के आयात की कोशिश नहीं की है।

मुझे एक ही समस्या का सामना करना पड़ रहा है, मैं प्रतिक्रियाजे सर्वर प्रतिपादन लागू करने की कोशिश कर रहा हूं। इसके लिए कोई फिक्स।

मैंने इसे अपने बेबेलर में रखा है और चीजें काम कर रही हैं:

{
"प्रीसेट": ["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 <

ऐसा लगता है कि मुझे भी यह समस्या हो रही है। यह तब होता है जब मुझे पीएनजी की आवश्यकता होती है।

({"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)) + ';';
  },
};

फिर इसे 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> जेस्ट द्वारा आपूर्ति किया गया एक टोकन है, और यह मान लिया कि यह कुछ ऐसा था जिसे मुझे बदलने की आवश्यकता थी। इसे moduleNameMapper प्रविष्टियों में जोड़ने से समस्या हल हो गई।

मैंने @bombellos द्वारा उल्लिखित assetTransformer.js को जोड़ा। वेबपैक के साथ प्रयोग करने के निर्देशों का भी पालन किया। लेकिन मुझे अभी भी वही त्रुटियां मिलती हैं।

पीएनजी:

 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)

एसवीजी:

 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

जाहिर है, फ़ाइलों को अभी भी मजाक किए जाने के बजाय लोड किया गया है, लेकिन मुझे कोई सुराग नहीं है कि इसे कैसे डिबग करना है।

.बेबेलआरसी:

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

पैकेज.जेसन:

  "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 । हालांकि यह अभी तक नहीं चल रहा है, मुझे अब यह विशेष त्रुटि नहीं मिलती है।

काम कर गया। यहां महत्वपूर्ण बिट्स हैं (कृपया ध्यान दें कि प्रतिक्रिया 16 के साथ एंजाइम 3 के कारण मेरे पास कुछ अतिरिक्त कॉन्फ़िगरेशन है):

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

अनिवार्य रूप से, यह उस मॉड्यूल से सब कुछ मैप कर रहा है जहां मुझे एक एसवीजी की आवश्यकता है। इस प्रकार, आप बस उस मॉड्यूल से दूर हो सकते हैं:

module.exports = {}

जैसा कि ऊपर बताया गया है, अन्य कामकाज पहचान-ओबीजे-प्रॉक्सी का उपयोग करना है।

@magnusart

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

यह मेरा दिन बचाता है। धन्यवाद!!।

@mbaranovski यह ठीक काम करता था जब मैं परीक्षण के लिए केवल जेस्ट दौड़ता था। अफसोस की बात है कि जब मैं क्रिएट-रिएक्शन-ऐप से प्रतिक्रिया-स्क्रिप्ट के माध्यम से चलाने की कोशिश करता हूं तो मुझे मिलता है

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

क्या इसके आसपास कोई कार्य है ? या एकमात्र समाधान क्रिएट-रिएक्शन-ऐप को बाहर करना है?

मुझे नहीं लगता कि सीआरए उस विकल्प का समर्थन करता है। मुझे यकीन नहीं है कि यह विकल्पों को बंद क्यों करना चाहता है, शायद एक अच्छा कारण 🙂

/सीसी @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 पैकेज का उपयोग करके हल किया, क्योंकि यहां सभी समाधान मेरे लिए कारगर नहीं थे। हो सकता है कि मेरी समस्या एक अलग हो, क्योंकि मुझे 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))"
    ]
  },
  // ...
}

एक्सएमएल फाइलों को संभालने के लिए थोड़ा संशोधन, इस मामले में ट्रांसफॉर्म विकल्प का उपयोग कर:

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/hi/webpack

@magnusart

"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 के समाधान ने मेरे लिए काम किया।

@magnusart
तुम मेरा दिन बचाओ, यह ठीक काम करता है

./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 बनाया) 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 समाधान) की कोशिश की, और वह मेरे लिए काम करने वाला एकमात्र था।

अगर किसी को एसवीजी के साथ यह त्रुटि मिल रही है, तो शायद इस lib का उपयोग कर सकते हैं, यह मेरे लिए वास्तव में अच्छा काम करता है https://www.npmjs.com/package/jest-svg-transformer

मैंने केवल अपने jest.config.ts फ़ाइल में यह कोड जोड़ा है

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

और इस फाइल पर कोड यह है

आप लोग मॉड्यूलनाममैपर को अनदेखा कर सकते हैं, सिर्फ इसलिए कि मैं बेबेल के साथ कस्टम आयात का उपयोग कर रहा हूं