Cara mengatasi "Tidak dapat menggunakan pernyataan impor di luar modul" di bercanda

Saya memiliki aplikasi Bereaksi (tidak menggunakan Buat Bereaksi Aplikasi) dibangun menggunakan TypeScript, Jest, Webpack, dan Babel. Saat mencoba menjalankan "gurauan benang", saya mendapatkan kesalahan berikut:

Saya telah mencoba menghapus semua paket dan menambahkannya kembali. Itu tidak menyelesaikan ini. Saya telah melihat pertanyaan dan dokumentasi yang serupa dan masih salah paham akan sesuatu. Saya melangkah lebih jauh dengan mengikuti panduan lain untuk mengatur lingkungan ini dari awal dan masih menerima masalah ini dengan kode saya.

Ketergantungan termasuk ...

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

Jalur impor komponen ...

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

File uji ....

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

Saya berharap dapat menggunakan impor bernama dalam komponen saya tanpa pengujian saya meledak. Tampaknya memperbaiki masalah jika saya hanya menggunakan impor default melalui solusi saya, tapi saya lebih suka untuk tidak pergi rute itu.

Solusi: Impor nama saya berasal dari file index.js dan saya yakin ts-jest membutuhkannya sebagai file index.ts (Saya menggunakan Typecript). Jika ada orang lain yang mengalami kesalahan ini, tidak ada salahnya untuk memeriksa apakah Anda merusak ekstensi file Anda.

Sayangnya, saya membuang banyak waktu untuk hal ini, tetapi saya belajar banyak tentang konfigurasi webpack dan Babel.

Untuk referensi di masa mendatang,

Saya memecahkan masalah dengan menggunakan konfigurasi bercanda di bawah ini, setelah membaca jawaban 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",
  }
};

coba hal ini jika Anda menggunakan babel 6 1) Menambahkan @ babel / plugin-transform-modules-commonjs di bagian plugin babel.config.js

atau

2) Untuk masalah impor kasus saya disebabkan oleh drop file reaksi dengan menambahkannya ke transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)"],

Saya mengalami masalah yang sama dengan Typescript, Jest, dan VueJS / VueCli 3. Build normal tidak memiliki masalah. hanya terjadi pada Jest. Saya berjuang selama berjam-jam dengan mencari. Tetapi tidak ada jawaban yang benar-benar berfungsi. Dalam kasus saya, saya memiliki ketergantungan pada paket naskah saya sendiri yang saya spesifikkan "target": "es6" di tsconfig.json . Itulah akar masalahnya. Jadi solusinya adalah dengan mengubah tanggungan kembali ke es5 tsconfig.json:

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

Gunakan Babel untuk mentranspilasikan Modul JS tersebut dan Anda akan dapat menulis tes Anda dengan es6.

Instal Babel / preset-env

npm i -D @babel/preset-env

Buat file konfigurasi babel dengan preset

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