Jest: जेस्ट JSX के साथ काम नहीं करता है जो CSS आयात करता है

@svipben https://facebook.github.io/jest/docs/webpack.html#mocking -css-modules

@maximderbin धन्यवाद!

@maximderbin धन्यवाद! यह moduleNameMapper . जोड़कर मेरी समस्या का समाधान करता है

@svipben @maximderbin @simonxl मुझे यह मॉड्यूलनाममैपर कहां जोड़ना है?
मैं दस्तावेज़ में देखता हूं कि हम इसे packag.json में जोड़ेंगे लेकिन कौन सा?
टीएनएक्स

@sarahmarciano moduleNameMapper आपके कॉन्फ़िगरेशन का एक हिस्सा है। डिफ़ॉल्ट रूप से, आप "jest" कुंजी के तहत package.json (जो निर्भरता में जेस्ट की सुविधा देता है) में कॉन्फ़िगरेशन सेट कर सकते हैं, जैसे:

{
  "dependencies": {...}
  "jest": {
    "moduleNameMapper": {...}
  }
}

मैंने पैकेज में जेस्ट कॉन्फ़िगरेशन में moduleNameMapper कुंजी का उपयोग करके इसे हल किया।json फ़ाइल

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

इसके बाद आपको नीचे बताए अनुसार दो फाइलें बनानी होंगी

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

module.exports = 'test-file-stub';

यदि आप 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|scss|sass)$": "identity-obj-proxy"
    },
  }
}

लेकिन आपको identity-obj-proxy पैकेज को देव निर्भरता के रूप में स्थापित करने की आवश्यकता होगी

yarn add identity-obj-proxy -D

अधिक जानकारी के लिए। आप जेस्ट डॉक्स का उल्लेख कर सकते हैं

ध्यान दें कि यदि आपके सीएसएस मॉड्यूल उन मूल्यों को निर्यात करते हैं जिन पर आपकी जेएसएक्स फाइलें निर्भर करती हैं तो यहां अनुशंसित दृष्टिकोण काम नहीं करेंगे। अधिकांश मार्गदर्शिकाएँ मानती हैं कि आप वर्ग नामों को निर्यात करने के लिए केवल CSS मॉड्यूल का उपयोग कर रहे हैं। काश सीएसएस मॉड्यूल का ठीक से मजाक उड़ाने के लिए एक गाइड होता।

@ मैथ्यू-डीन आपका क्या मतलब है "सीएसएस मॉड्यूल का ठीक से मजाक करना"? क्या आप अपने उपयोग के मामले का थोड़ा और वर्णन कर सकते हैं? मुझे identity-obj-proxy का उपयोग करने का बहुत अच्छा अनुभव है

:export {
  sizeMobile: $size-mobile / 1px;
  sizePhablet: $size-phablet / 1px;
  sizeSmallTablet: $size-small-tablet / 1px;
  sizeTablet: $size-tablet / 1px;
  sizeDesktop: $size-desktop / 1px;
  sizeLargeDesktop: $size-large-desktop / 1px;
}

import styles from './variables.scss'

const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
  return <Tile style={{width: tileSize}} />
}

यह एक काल्पनिक उदाहरण है, बस यह दर्शाता है कि आप सीएसएस मॉड्यूल और जेएस के बीच स्थिरांक (मान) साझा कर सकते हैं, और यह कि सशर्त प्रतिपादन या गतिशील प्रॉप्स को मूल्यों के आधार पर सौंपा जा सकता है।

लेकिन identity-obj-proxy के साथ, इन मानों को पूर्णांक में नहीं डाला जा सकता है, केवल वास्तविक मान मौजूद हैं। इसलिए यदि आपके पास JSX कोड है जो आपके CSS मॉड्यूल में परिभाषित स्थिरांक पर निर्भर करता है, तो आप CSS मॉड्यूल का ठीक से मजाक किए बिना इसका परीक्षण नहीं कर सकते हैं (एक ऑब्जेक्ट लौटाए जाने पर जिसमें परीक्षण योग्य पूर्णांक के रूप में मान हैं)। identity-obj-proxy केवल यह मानता है कि आपके सीएसएस मॉड्यूल में एक ऑब्जेक्ट है जिसमें स्कोप्ड सीएसएस क्लासनाम से ज्यादा कुछ नहीं है; यह सीएसएस मॉड्यूल के दूसरे पहलू का समर्थन नहीं करता है जो मूल्यों / स्थिरांक को निर्यात करने की क्षमता है जो बदले में जेएस संचालन में उपयोग किया जाता है।

@ सिमेनबी

संयोग से, मैं इस तरह सफलतापूर्वक सीएसएस मॉड्यूल का नकल करने में सक्षम था:

const styles = require('styles/variables.scss')

jest.mock('styles/variables.scss', () => {
  return {
    sizePhablet: 500,
    sizeSmallTablet: 768,
    sizeTablet: 1024,
    sizeDesktop: 1440,
    sizeLargeDesktop: 1920
  }
})

उम्मीद है कि यह किसी और के लिए उपयोगी है जो सीएसएस मॉड्यूल की सभी सुविधाओं का उपयोग कर रहा है और, मेरी तरह, अपने बालों को सभी डिफ़ॉल्ट "बस identity-obj-proxy " सलाह का उपयोग करें।

मैंने 'जेस्ट-ट्रांसफॉर्म-सीएसएस' का उपयोग करके इस समस्या को हल किया।
इंस्टॉल करने के बाद, नीचे दिए गए जेस्ट कॉन्फिग में जोड़ें।

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

अब css फाइलें ठीक वैसे ही ट्रांसपाइल हो जाएंगी जैसे JS फाइलें करती थीं।

@ मैथ्यू-डीन आपने सीएसएस मॉड्यूल का नकली कहां लिखा था और आप इसे जेस्ट के संदर्भ में कैसे संदर्भित करते हैं?

मैं एक बाहरी पैकेज का उपयोग कर रहा हूं और यह निम्नलिखित का उपयोग करके अपनी फाइलों को एक फाइल में आयात करता है:
<strong i="6">@import</strong> "progress-tracker/progress-tracker-variables.scss";

जब भी मैं परीक्षण शुरू करने के लिए जेस्ट चलाता हूं

उपरोक्त त्रुटि दिखाई देती है। मैंने पहले ही पैकेज के अंदर css मॉकअप निर्दिष्ट कर दिया है।json

मैं उस मुद्दे के बारे में कुछ मदद पाने के लिए उत्सुक हूं। कोई तरकीब, सुझाव?

संपादित करें: मैंने बैबेल-जेस्ट और आइडेंटिटी-ओबीजे-प्रॉक्सी पैकेज दोनों की कोशिश की है और उनमें से किसी ने भी काम नहीं किया है। समस्या अभी भी बनी हुई है।

संपादित करें 2: इसके अलावा मैंने वेब पर आए समाधानों के अनुसार नीचे दिए गए कॉन्फ़िगरेशन की कोशिश की है।

मैं बैबेल 7 , बेबेल-जेस्ट ^24.5.0 , जेस्ट ^24.1.0 का उपयोग कर रहा हूं।

उपरोक्त सलाह का पालन करने के बाद भी, मुझे यह त्रुटि तब भी मिल रही है जब मैं लक्ष्य फ़ाइल (जैसे $#$5) को जेस्ट परीक्षण फ़ाइल (जैसे Post.test.js ) में फ़ंक्शन या ऑब्जेक्ट करने import प्रयास करता हूं (उदाहरण के लिए Post.js ) एक CSS फ़ाइल आयात करता है - जैसे ./postStyles.css ।

Jest encountered an unexpected token

SyntaxError: Unexpected token .

Details:

    /Users/ben/Desktop/Work/code/bengrunfeld/src/front-end/components/Post/postStyles.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.post h1, .post h2, .post h3 {

      3 |
      4 | import { PostText } from './styles'
    > 5 | import './postStyles.css'

ऊपर दिए गए लेख के अनुसार, यह मेरे package.json में है:

"jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },

और मूल निर्देशिका में, मेरे पास __mocks__/styleMock.js है जिसमें निम्न कोड है:

module.exports = {};

अंत में, मेरा jest.config.js :

module.exports = {
  setupFiles: ['<rootDir>/src/test/setup.js']
}

जो बदले में एंजाइम को विन्यस्त करता है:

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

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

मैं लगभग उसी मुद्दे को हल करने के लिए संघर्ष कर रहा हूं जहां मेरी एससीएसएस फ़ाइल में @import स्टेटमेंट हैं। सिंटैक्स त्रुटि बताने में परीक्षण विफल: अमान्य या अनपेक्षित टोकन। कृपया क्या कोई मेरी सहायता कर सकता है?

मैंने ऊपर दिए गए समाधानों का पालन किया लेकिन उनमें से कोई भी मेरे लिए काम नहीं कर रहा है

मैं एक देव निर्भरता के रूप में @babel/polyfill जोड़कर इसे हल करने में सक्षम था

वही यहाँ @ fthomas82

मैंने पैकेज में जेस्ट कॉन्फ़िगरेशन में moduleNameMapper कुंजी का उपयोग करके इसे हल किया।json फ़ाइल

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

इसके बाद आपको नीचे बताए अनुसार दो फाइलें बनानी होंगी

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

module.exports = 'test-file-stub';

यदि आप 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|scss|sass)$": "identity-obj-proxy"
    },
  }
}

लेकिन आपको identity-obj-proxy पैकेज को देव निर्भरता के रूप में स्थापित करने की आवश्यकता होगी

yarn add identity-obj-proxy -D

अधिक जानकारी के लिए। आप जेस्ट डॉक्स का उल्लेख कर सकते हैं

इसने मेरे लिए काम किया। धन्यवाद!!!

मैंने 'जेस्ट-ट्रांसफॉर्म-सीएसएस' का उपयोग करके इस समस्या को हल किया।
इंस्टॉल करने के बाद, नीचे दिए गए जेस्ट कॉन्फिग में जोड़ें।

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

अब css फाइलें ठीक वैसे ही ट्रांसपाइल हो जाएंगी जैसे JS फाइलें करती थीं।

धन्यवाद, भाई @krajasekhar
यह मेरे लिए काम करता है

मैंने बिना किसी सफलता के packages.json में सुझाए गए कॉन्फ़िगरेशन को जोड़ा, तब मुझे एहसास हुआ कि मेरे प्रोजेक्ट रूट निर्देशिका में jest.config.js था, जेस्ट उस कॉन्फ़िगरेशन फ़ाइल का उपयोग packages.json से अधिक करता है।

यहाँ संदर्भ के लिए मेरी jest.config.js फ़ाइल है:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

मुझे अपने कोड में एक कच्चा सीएसएस आयात करना है

import "./cloud.css?raw"

मैंने जेस्ट कॉन्फिग को भी संशोधित किया है
"jest":{ "moduleNameMapper": { "\\.(css|less|scss|sass|css?raw)$": "identity-obj-proxy" },

फिर भी, मुझे आयात लाइन पर परीक्षण त्रुटि मिल रही है। कच्चे आयात का मजाक उड़ाने का कोई विचार?

@import अनपेक्षित टोकन का समाधान = :)

पैकेज स्थापित करे:
npm i --save-dev identity-obj-proxy

Jest.config.js . में जोड़ें

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

अगर कोई यहाँ आता है:
यह मॉड्यूल सबसे अद्यतन मैंने देखा है: https://www.npmjs.com/package/jest-css-modules-transform

transform: { '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest', ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform" }, transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$', ], moduleNameMapper: { '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy' },

मैंने बिना किसी सफलता के packages.json में सुझाए गए कॉन्फ़िगरेशन को जोड़ा, तब मुझे एहसास हुआ कि मेरे प्रोजेक्ट रूट निर्देशिका में jest.config.js था, जेस्ट उस कॉन्फ़िगरेशन फ़ाइल का उपयोग packages.json से अधिक करता है।

यहाँ संदर्भ के लिए मेरी jest.config.js फ़ाइल है:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

समाधान प्रस्तुत करने वाले सभी लोगों को धन्यवाद और विशेष रूप से आपको @Shadoow! यह एक तरह की तार्किक बात थी लेकिन मुझे याद आ रहा था कि ... कॉन्फ़िगरेशन फ़ाइल का उपयोग package.json . में सेटिंग्स पर किया जाएगा

संक्षेप में, नए लोगों के लिए, जो मेरे लिए कारगर रहा, वह हमारी सामुदायिक ड्रीम टीम द्वारा प्रस्तुत किए गए कई समाधानों का एक संघ था:

1) एक jest.config.json फ़ाइल बनाएँ

touch jest.config.json open jest.config.json

2) जेस्ट-ट्रांसफॉर्म-सीएसएस स्थापित करें:

yarn add jest-transform-css -D

3) आपकी जेस्ट कॉन्फिग फाइल इस तरह दिखनी चाहिए:

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': './jest.mock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/assets/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(css|less|scss|sass)$': 'jest-transform-css',
  },
};

4) अपने package.json को अपडेट करें (पहले, अपने सभी जेस्ट कॉन्फ़िगरेशन को स्थानांतरित करें, यदि आपके पास कुछ है, तो नई जेस्ट कॉन्फ़िगरेशन फ़ाइल में), तो जादू यहाँ जाता है:

"test": "jest --config ./jest.config.js"

हर कोई!