☰

テスト実行時に Jest から「モジュール外でインポート ステートメントを使用できません」というエラーを解決するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon reactjs jestjs babeljs babel-jest ts-jest
テスト実行時に Jest から「モジュール外でインポート ステートメントを使用できません」というエラーを解決するにはどうすればよいでしょうか? 質問する

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

テストが失敗することなく、コンポーネントで名前付きインポートを使用できると期待していました。ソリューション全体でデフォルトのインポートのみを使用すると問題が解決するようです。しかし、その方法は避けたいと思います。

ベストアンサー1

私も同じ失敗を経験しました (Babel、Typescript、Jest も使用)。何時間も気が狂いそうでした。

結局、babel.config.jsテスト専用の新しいファイルを作成しました。 大きな がありました.babelrcが、何をしても jest では取得されませんでした。 メイン アプリでは、.babelrcがファイルを上書きするため、引き続き を使用していますbabel.config.js。

私が実行した手順:

jest、、、およびをインストールしts-jestます。babel-jest@babel/preset-env

npm i jest ts-jest babel-jest @babel/preset-env

追加babel.config.js(jest でのみ使用)

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

更新jest.config.js内容:

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  }
};

package.json

  "scripts": {
    "test": "jest"

おすすめ記事