jestの「モジュールの外部でimportステートメントを使用できない」を解決する方法

TypeScript、Jest、Webpack、Babelを使用して構築されたReactアプリケーション（Create React Appを使用していない）があります。「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について多くのことを学びました。

今後の参考のために、

Logan Shoemakerの回答を読んだ後、以下のjest configを使用して問題を解決しました。

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.config.jsのプラグインセクションに@ babel / plugin-transform-modules-commonjsを追加します

または

2）私の場合、インポートの問題は、transfromIgnorePatterns "transformIgnorePatterns"：["/ node_modules /（?! react-file-drop）"]に追加することによる反応ファイルのドロップが原因でした。

Typescript、Jest、VueJS / VueCli 3でも同じ問題が発生しました。通常のビルドでは問題ありません。ジェストでのみ発生します。検索して何時間も苦労しました。しかし、実際には答えはありません。私の場合、私は私自身のtypescriptですパッケージに依存関係を持っているIの特定の「ターゲット」：「ES6」でtsconfig.json。それが根本的な原因です。したがって、解決策は、依存関係をes5 tsconfig.json に戻すだけです。

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

Babelを使用してこれらのJSモジュールをトランスパイルすると、es6でテストを記述できるようになります。

Babel / preset-envをインストールする

npm i -D @babel/preset-env

プリセットを使用してバベル構成ファイルを作成する

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