जेस्ट में "मॉड्यूल के बाहर आयात स्टेटमेंट का उपयोग नहीं किया जा सकता" कैसे हल करें

Question

मेरे पास टाइपस्क्रिप्ट, जेस्ट, वेबपैक और बैबेल का उपयोग करके बनाया गया एक रिएक्ट एप्लिकेशन (क्रिएट रिएक्ट ऐप का उपयोग नहीं) है। "यार्न जेस्ट" को चलाने की कोशिश करते समय, मुझे निम्न त्रुटि मिलती है:

मैंने सभी पैकेजों को हटाने और उन्हें फिर से जोड़ने की कोशिश की है। यह इसका समाधान नहीं है। मैंने ऐसे ही सवालों और दस्तावेजों को देखा है और अभी भी कुछ गलत समझ रहा हूं। मैं इस वातावरण को खरोंच से स्थापित करने के लिए एक अन्य गाइड का पालन करने के लिए इतनी दूर चला गया और अभी भी अपने कोड के साथ इस मुद्दे को प्राप्त किया।

निर्भरता में शामिल हैं ...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

घटक की आयात लाइनें ...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

परीक्षण फ़ाइल ....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
    const tree = renderer
        .create(<App />)
        .toJSON();
    expect(tree).toMatchSnapshot();
});

मैं उम्मीद करता हूं कि मेरे घटकों में नामांकित आयातों का उपयोग किए बिना मेरे परीक्षणों को उड़ाने में सक्षम होगा। यह समस्या को ठीक करने के लिए प्रकट होता है यदि मैं केवल अपने समाधान के माध्यम से डिफ़ॉल्ट आयात का उपयोग करता हूं, लेकिन मैं उस मार्ग पर नहीं जाना पसंद करूंगा।

Comments

FYI करें, मैं Jest के लिए एक कस्टम TestSequencer की स्थापना करते समय इस पर चल रहा था और मैंने सिर्फ इस एक फ़ाइल के requireबदले उपयोग करने के लिए स्विच किया import।

— जोशुआ पिंटर

Answer 1

समाधान: मेरे नामित आयात index.js फ़ाइलों से आ रहे थे और मेरा मानना ​​है कि ts-jest को index.ts फ़ाइलों के रूप में उनकी आवश्यकता है (मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं)। यदि कोई अन्य व्यक्ति इस त्रुटि में चलता है, तो यह जांचने के लिए चोट नहीं कर सकता है कि आपने अपनी फ़ाइल एक्सटेंशन को बंद कर दिया है।

मैंने इस पर बहुत समय बर्बाद किया, दुर्भाग्य से, लेकिन मैंने वेबपैक कॉन्फ़िगरेशन और बैबेल के बारे में बहुत कुछ सीखा।

Answer 2

भविष्य के संदर्भों के लिए,

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

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
  }
};

Answer 3

अगर आप babel 6 1 का उपयोग कर रहे हैं तो इस चीज को आज़माएं

या

2) मेरे मामले के लिए आयात का मुद्दा प्रतिक्रिया फ़ाइल ड्रॉप के कारण था कि transfromIgnorePatterns "transformIgnorePatterns" में जोड़कर: "[/ node_modules / (? प्रतिक्रिया-फ़ाइल-ड्रॉप)]]!

Answer 4

मुझे टाइपस्क्रिप्ट, जेस्ट और VueJS / VueCli 3 के साथ एक ही समस्या का सामना करना पड़ा। सामान्य बिल्ड में कोई समस्या नहीं है। केवल जेस्ट के लिए होता है। मैं खोज-खोज कर घंटों जूझता रहा। लेकिन वास्तव में कोई जवाब काम नहीं करता है। मेरे मामले में, मेरे अपने टाइपस्क्रिप्ट पैकेज पर निर्भरता है जो मैं विशिष्ट "लक्ष्य": tsconfig.json में "es6" करता हूं । वह मूल कारण है। तो समाधान बस आश्रितों को वापस es5 tsconfig.json में बदलने के लिए है :

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}

Comments

आपने क्या बदला?

— निदा मुनीर

मेरी मूल पोस्ट में गलती के लिए क्षमा करें। मैं निर्भर मॉड्यूल में es6 का उपयोग कर रहा था । यही समस्या की जड़ है। जब मैं वापस es5 में बदल गया , समस्या हल हो गई

— जियानवू चेन

Answer 5

उन जेएस मॉड्यूल्स को ट्रांसप्लांट करने के लिए बैबेल का उपयोग करें और आप es6 के साथ अपने परीक्षण लिखने में सक्षम होंगे।

बैबेल / प्रीसेट-एनवी स्थापित करें

npm i -D @babel/preset-env

प्रीसेट के साथ एक बैबल कॉन्फ़िगरेशन फ़ाइल बनाएँ

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}