Jest'te “İçe aktarma deyimi bir modül dışında kullanılamaz” nasıl giderilir

TypeScript, Jest, Webpack ve Babel kullanılarak oluşturulan bir React uygulaması (Create React App kullanmadan) var. "İplik jest" çalıştırmaya çalışırken, aşağıdaki hatayı alıyorum:

Tüm paketleri kaldırmayı ve yeniden eklemeyi denedim. Bunu çözmez. Benzer sorulara ve belgelere baktım ve hala bir şeyleri yanlış anlıyorum. Şimdiye kadar bu ortamı sıfırdan ayarlamak için başka bir kılavuzu takip etmek için gittim ve hala kodumla bu sorunu aldım.

Bağımlılıklar şunları içerir ...

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

Bileşenin ithalat hatları ...

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

Test dosyası ....

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

Testlerim patlamadan bileşenlerimde adlandırılmış ithalat kullanabilmeyi bekliyordum. Çözümüm aracılığıyla yalnızca varsayılan içe aktarmaları kullanırsam sorunu giderir gibi görünüyor, ancak bu rotaya gitmemeyi tercih ederim.

Çözüm: benim adlandırılmış ithalatı index.js dosyalarından geliyordu ve ts-jest onlara index.ts dosyaları olarak gerekli olduğuna inanıyorum (Typescript kullanıyorum). Başka biri bu hatayla karşılaşırsa, dosya uzantılarınızı indirip düşürmediğinizi kontrol etmek zarar veremedi.

Maalesef bu konuda çok zaman harcadım, ancak webpack yapılandırmaları ve Babel hakkında çok şey öğrendim.

İleride referans almak için,

Logan Shoemaker'ın cevabını okuduktan sonra sorunu aşağıdaki jest config kullanarak çözdüm.

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 kullanıyorsanız bu şeyi deneyin 1) babel.config.js eklenti bölümüne @ babel / plugin-transform-modules-commonjs ekleniyor

veya

2) Benim durumum için içe aktarma sorunum, transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! tepki-dosya-bırakması)"] ekleyerek reaksiyon dosyası düşüşünden kaynaklanıyordu.

Typescript, Jest ve VueJS / VueCli 3 ile aynı sorunla karşılaştım. Normal derleme sorun yok. sadece Jest için olur. Arayarak saatlerce uğraştım. Ama aslında cevap yok. Benim durumumda, tsconfig.json içinde "target": "es6" olarak belirlediğim kendi daktilo paketim üzerinde bir bağımlılığım var . Bunun temel nedeni budur. Solüsyon değiştirmek için basitçe Yani bakmakla geri ES5 tsconfig.json:

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

Bu JS Modüllerini aktarmak için Babel'i kullanın ve testlerinizi es6 ile yazabilirsiniz.

Babel / preset-env'yi yükleyin

npm i -D @babel/preset-env

Ön ayarlı bir babel yapılandırma dosyası oluşturma

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