วิธีแก้ไข“ ไม่สามารถใช้คำสั่งนำเข้านอกโมดูล” ได้อย่างตลก

ฉันมีแอปพลิเคชัน React (ไม่ได้ใช้สร้างแอป React) ที่สร้างโดยใช้ TypeScript, Jest, Webpack และ Babel เมื่อพยายามเรียกใช้ "yarn jest" ฉันได้รับข้อผิดพลาดต่อไปนี้:

ฉันได้ลองลบแพ็กเกจทั้งหมดและเพิ่มใหม่อีกครั้ง มันไม่ได้แก้ปัญหานี้ ฉันได้ดูคำถามและเอกสารประกอบที่คล้ายกันและยังคงมีความเข้าใจผิดอยู่บ้าง ฉันไปจนถึงทำตามคำแนะนำอื่นสำหรับการตั้งค่าสภาพแวดล้อมนี้ตั้งแต่เริ่มต้นและยังได้รับปัญหานี้ด้วยรหัสของฉัน

การพึ่งพารวมถึง ...

"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();
});

ฉันคาดว่าจะสามารถใช้การนำเข้าที่มีชื่อในส่วนประกอบของฉันได้โดยไม่ต้องทำการทดสอบ ดูเหมือนว่าจะแก้ไขปัญหาหากฉันใช้การนำเข้าเริ่มต้นผ่านทางโซลูชันของฉันเท่านั้น แต่ฉันไม่ต้องการไปเส้นทางนั้น

วิธีแก้ปัญหา: การนำเข้าชื่อของฉันมาจากไฟล์ index.js และฉันเชื่อว่า ts-jest ต้องการให้เป็นไฟล์ index.ts (ฉันใช้ typescript) หากบุคคลอื่นพบข้อผิดพลาดนี้ไม่สามารถทำร้ายได้ว่าคุณตรวจสอบนามสกุลไฟล์ของคุณหรือไม่

ฉันเสียเวลาไปมากกับเรื่องนี้โชคไม่ดี แต่ฉันได้เรียนรู้มากมายเกี่ยวกับการกำหนดค่า webpack และ Babel

สำหรับการอ้างอิงในอนาคต

ฉันแก้ไขปัญหาโดยใช้การตั้งค่า jest ด้านล่างหลังจากอ่านคำตอบของ Logan Shoemaker

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",
  }
};

ลองใช้สิ่งนี้หากคุณใช้ babel 6 1) การเพิ่ม @ babel / plugin-transform-modules-commonjs ในส่วนปลั๊กอินของ babel.config.js

หรือ

2) สำหรับปัญหาการนำเข้าเคสของฉันเกิดจากการดร็อปไฟล์ตอบสนองโดยการเพิ่มลงใน transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)"],

ฉันพบปัญหาเดียวกันกับ Typescript, Jest และ VueJS / VueCli 3 บิลด์ปกติไม่มีปัญหา เกิดขึ้นสำหรับ Jest เท่านั้น ฉันพยายามหลายชั่วโมงโดยการค้นหา แต่ไม่มีคำตอบที่ใช้งานได้จริง ในกรณีของฉันฉันมีการพึ่งพาแพคเกจ typescript ของตัวเองซึ่งผมเฉพาะ"เป้าหมาย": "ES6"ในtsconfig.json นั่นคือสาเหตุที่แท้จริง ดังนั้นการแก้ปัญหาคือการเปลี่ยนผู้ติดตามกลับไปเป็นes5 tsconfig.json:

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

ใช้ Babel เพื่อ transpile โมดูล JS เหล่านั้นและคุณจะสามารถเขียนแบบทดสอบของคุณด้วย es6

ติดตั้ง Babel / preset-env

npm i -D @babel/preset-env

สร้างไฟล์กำหนดค่า babel ด้วยการตั้งค่าล่วงหน้า

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