ঠাট্টায় "কীভাবে কোনও মডিউলের বাইরে আমদানি বিবৃতি ব্যবহার করতে পারি না" তা কীভাবে সমাধান করবেন

Question

টাইপস্ক্রিপ্ট, জাস্ট, ওয়েবপ্যাক এবং ব্যাবেল ব্যবহার করে আমার একটি প্রতিক্রিয়া অ্যাপ্লিকেশন রয়েছে (তৈরি করুন প্রতিক্রিয়া অ্যাপ ব্যবহার করে না) using "সুতা জেস্ট" চালানোর চেষ্টা করার সময় আমি নিম্নলিখিত ত্রুটিটি পেয়েছি:

আমি সমস্ত প্যাকেজগুলি সরানোর এবং সেগুলিতে পুনরায় যুক্ত করার চেষ্টা করেছি। এটি এর সমাধান করে না। আমি অনুরূপ প্রশ্ন এবং ডকুমেন্টেশন দেখেছি এবং এখনও কিছু ভুল বোঝাবুঝি করছি। আমি স্ক্র্যাচ থেকে এই পরিবেশটি স্থাপনের জন্য অন্য গাইড অনুসরণ করতে পেরেছি এবং এখনও আমার কোড সহ এই সমস্যাটি পেয়েছি।

নির্ভরতা অন্তর্ভুক্ত ...

"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

এফওয়াইআই, জেস্টের জন্য একটি কাস্টম টেস্ট সিকোয়েন্সার সেটআপ করার সময় আমি এটির মধ্যে দৌড়াচ্ছিলাম এবং আমি কেবল এই একটি ফাইলের requireপরিবর্তে ব্যবহার করতে স্যুইচ করেছি import।

— জোশুয়া পিন্টার

Answer 1

সমাধান: আমার নামযুক্ত আমদানিগুলি index.js ফাইলগুলি থেকে আসছিল এবং আমি বিশ্বাস করি যে ts-jest এগুলি সূচি.এসটি ফাইল হিসাবে প্রয়োজন (আমি টাইপসক্রিপ্টটি ব্যবহার করছি)। অন্য কেউ যদি এই ত্রুটিতে চলে আসে তবে আপনি নিজের ফাইল এক্সটেনশানগুলি ডেরপড করেছেন কিনা তা পরীক্ষা করে আঘাত করতে পারেনি।

দুর্ভাগ্যক্রমে আমি এতে অনেক সময় নষ্ট করেছি, তবে আমি ওয়েবপ্যাক কনফিগারেশন এবং ব্যাবেল সম্পর্কে অনেক কিছু শিখেছি।

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

আপনি যদি ব্যাবেল 6 ব্যবহার করছেন তবে এই জিনিসটি ব্যবহার করে দেখুন 1) বাবেল.কনফিগ.জেএস এর প্লাগইন বিভাগে @ বাবেল / প্লাগইন-ট্রান্সফর্ম-মডিউল-কমনজ যুক্ত করুন

অথবা

2) আমার ক্ষেত্রে আমদানি ইস্যুটি ট্রান্সফরমআইগনোরপ্যাটার্নগুলিকে "ট্রান্সফর্মআইগনোরপ্যাটার্নস": ["/ নোড_মডিউলস / (?! রিএ্যাক্ট-ফাইল-ড্রপ)" যোগ করে রিট্যাক্ট ফাইল ড্রপের কারণে হয়েছিল]

Answer 4

আমি টাইপস্ক্রিপ্ট, জেস্ট এবং ভ্যুজেএস / ভুইক্লি 3 এর সাথে একই সমস্যার মুখোমুখি হয়েছি build সাধারণ বিল্ডটিতে কোনও সমস্যা নেই। কেবল জাস্টের জন্যই ঘটে। আমি ঘন্টার পর ঘন্টা অনুসন্ধান করে। কিন্তু কোন উত্তর আসলে কাজ করে না। আমার ক্ষেত্রে, আমি আমার নিজের টাইপ করা বিষয় প্যাকেজ নির্ভরশীলতার আছে যা আমি নির্দিষ্ট "লক্ষ্য": "es6" মধ্যে tsconfig.json । এর মূল কারণ। সুতরাং সমাধান পরিবর্তন সহজভাবে হয় নির্ভরশীলদের ফিরে es5 tsconfig.json:

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

Comments

আপনি কি পরিবর্তন করেছেন?

— নিদা মুনির

আমার মূল পোস্টে ভুলের জন্য দুঃখিত। আমি নির্ভরশীল মডিউলে es6 ব্যবহার করছিলাম । এটাই সমস্যার মূল কারণ। আমি এস 5 এ ফিরে যাওয়ার পরে , সমস্যাটি সমাধান হয়ে যায়

— জিয়ানওয়ু চেন

Answer 5

এই জেএস মডিউলগুলি স্থানান্তরিত করতে বাবেল ব্যবহার করুন এবং আপনি এসএএস দিয়ে আপনার পরীক্ষা লিখতে সক্ষম হবেন।

ব্যাবেল ইনস্টল করুন / প্রিসেট- env

npm i -D @babel/preset-env

প্রিসেট সহ বাবেল কনফিগারেশন ফাইল তৈরি করুন

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