Cách giải quyết không thể sử dụng câu lệnh nhập bên ngoài mô-đun

Tôi có một ứng dụng React (không sử dụng Tạo ứng dụng React) được xây dựng bằng TypeScript, Jest, Webpack và Babel. Khi thử chạy "sợi jest", tôi gặp lỗi sau:

Tôi đã thử loại bỏ tất cả các gói và thêm lại chúng. Nó không giải quyết điều này. Tôi đã xem xét các câu hỏi và tài liệu tương tự và vẫn đang hiểu sai điều gì đó. Tôi đã đi xa đến mức làm theo hướng dẫn khác để thiết lập môi trường này từ đầu và vẫn nhận được vấn đề này với mã của tôi.

Phụ thuộc bao gồm ...

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

Các dòng nhập khẩu của thành phần ...

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

Các tập tin thử nghiệm ....

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

Tôi dự kiến ​​có thể sử dụng hàng nhập khẩu có tên trong các thành phần của mình mà không cần thử nghiệm. Nó xuất hiện để khắc phục sự cố nếu tôi chỉ sử dụng nhập mặc định thông qua giải pháp của mình, nhưng tôi không muốn đi theo tuyến đường đó.

Giải pháp: nhập khẩu có tên của tôi đến từ các tệp index.js và tôi tin rằng ts-jest cần chúng dưới dạng tệp index.ts (Tôi đang sử dụng Bản mô tả). Nếu bất kỳ ai khác gặp phải lỗi này, không thể kiểm tra xem bạn có làm hỏng phần mở rộng tệp của mình không.

Thật không may, tôi đã lãng phí rất nhiều thời gian cho việc này, thật không may, nhưng tôi đã học được rất nhiều về cấu hình webpack và Babel.

Để tham khảo trong tương lai,

Tôi đã giải quyết vấn đề bằng cách sử dụng cấu hình jest bên dưới, sau khi đọc câu trả lời của 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",
  }
};

hãy thử điều này nếu bạn đang sử dụng babel 6 1) Thêm @ babel / plugin-Transform-module-commonjs trong phần plugin của babel.config.js

hoặc là

2) Đối với trường hợp nhập vấn đề của tôi là do thả tệp phản ứng bằng cách thêm nó vào transfromIgnorePotypes "TransformIgnorePotypes": ["/ node_modules / (?! Reac-drop-file)"],

Tôi đã gặp vấn đề tương tự với Typecript, Jest và VueJS / VueCli 3. Bản dựng bình thường không có vấn đề gì. chỉ xảy ra với Jest. Tôi vật lộn hàng giờ bằng cách tìm kiếm. Nhưng không có câu trả lời thực sự hoạt động. Trong trường hợp của tôi, tôi có một sự phụ thuộc vào gói bản thảo của riêng tôi mà tôi chỉ định "mục tiêu": "es6" trong tsconfig.json . Đó là nguyên nhân sâu xa. Vì vậy, giải pháp đơn giản là thay đổi người phụ thuộc trở lại es5 tsconfig.json:

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

Sử dụng Babel để phiên mã các Mô-đun JS đó và bạn sẽ có thể viết các bài kiểm tra của mình với es6.

Cài đặt Babel / preset-env

npm i -D @babel/preset-env

Tạo một tập tin cấu hình babel với cài đặt trước

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