136

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

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

4

16 に答える 16

42

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

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

npm i -D @babel/preset-env

プリセットでbabel構成ファイルを作成する

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}
于 2019-12-25T20:52:48.473 に答える
1

一致するファイル拡張子:

ルートTodo.jsxに./src/Todo/. 私がそれを変更するたびにTodo.js、問題はなくなりました。

jsx免責事項: ファイル拡張子をjsコンポーネントの場合と比較するための要件が​​何であるかはわかりません。まったく影響はありませんでしたが、インテリセンスやスニペットを台無しにする可能性があることは想像できました。

于 2021-05-27T19:25:35.823 に答える
0

問題は、jest が esmodules をネイティブにサポートしていない可能性があります。typescript ターゲットが es6 以上の場合、問題が発生する可能性があります。

ビルドされた typescript 出力をテストしている場合は、module=commonjsトランスパイル中にフラグを追加するだけです。そうすれば、コードは es6 以降で実行でき、Jest でも動作します。

"scripts": {
  "test": tsc --module commonjs && jest {your-output-folder}/
}

これの素晴らしいところは、babel の依存関係や特別な jest ランナーを追加する必要がないことです:)

于 2021-11-03T19:34:47.347 に答える
-4

TypeScript を使用していて、tsconfig.json ファイルがある"module": "esnext"場合は、使用している場合は削除してみてください

ここに画像の説明を入力

于 2021-07-01T16:48:23.903 に答える