Jest: JestがReactアプリで予期しないトークンに遭遇しました

私も同じ問題を抱えています。

ここでも同じ問題があります。

ここでも同じ問題があります。モノレポで作業しているので、少し複雑です。

@fabioSalimbeni @hoaiduyit @mikedloss ReactおよびJestおよびenzyme ）をBabel7を使用してLernaモノレポに合格させました。

モノレポで作業している場合は、 babel.config.js新しいBabel構成を使用する必要があります： https ：//babeljs.io/docs/en/v7-migration

これは、monorepoのルートに対する私のbabel.config.jsです。

module.exports = {
    overrides: [
        {
            test: 'platforms/webApp1',
            extends: 'platforms/webApp1/babel.config.js'
        },
        {
            test: 'platforms/webApp2',
            extends: 'platforms/webApp2/babel.config.js'
        }
    ]
};

これは、monorepoアプリの1つであるwebApp1 babel.config.jsがどのように見えるかを示しています。

module.exports = {
    env: {
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        modules: 'commonjs',
                        debug: false
                    }
                ],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        production: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        development: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
};

そして、これはJestの構成です。

    "jest": {
        "verbose": true,
        "clearMocks": true,
        "collectCoverage": true,
        "setupTestFrameworkScriptFile": "<rootDir>/config/setupTest.js",
        "transform": {
            "^.+\\.js$": "babel-jest"
        },
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
        }
    }

setupTest.jsは次のようになります。

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

fileMocks.jsは次のようになります：

module.exports = 'i-am-a-stubbed-file';

styleMocks.jsは次のようになります：

module.exports = {};

また、各アプリのpackage.jsonにいくつかのBabelプラグインとbabel-coreバージョンをdevDependenciesとして追加する必要があります。

        ...
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        ...
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        ...

3日後、私はこの問題の解決策を見つけました。
これには2つの解決策があります。

解決策1：解決策1：

ファイル名を.babelrcからbabel.config.jsに変更でき、これは機能します。

##解決策2：
私はこのように使用しています。
次のような変換ファイルを作成します（私のものはjest-transforme.js ）：

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

これが私のjest.config.jsです：

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

そして、私はまだ私の.babelrc持っています
`` `
const enviroments = require（ "./ env-config.js"）;

module.exports = {
プリセット：[
[
「next / babel」、
{{
"preset-env"：{
useBuiltIns： "エントリ"
}
}
]
]、
プラグイン：[
["styled-components"、{ssr：true、displayName：true、preprocess：false}]、
[
「モジュールリゾルバ」、
{{
根： ["。/"]
}
]
]、
env：{
dev：{
プラグイン：[
["transform-define"、環境]、
["module-resolver"、{root：["./"]}]、
「transform-decorators-legacy」、
「transform-class-properties」
]
}、
建てる： {
プラグイン：[
["transform-define"、環境]、
["module-resolver"、{root：["./"]}]、
「transform-decorators-legacy」、
「transform-class-properties」
]
}、
製造： {
プリセット：[
[
"minify"、//ここにminifyを追加する理由、コードバンドル全体に対してuglifyを実行する
{{
マングル：false、
評価：false
}
]
]、
プラグイン：[
["transform-define"、環境]、
["@ babel / plugin-proposal-decorators"、{レガシー：true}]、
["@ babel / plugin-proposal-class-properties"、{loose：true}]、
["module-resolver"、{root：["./"]}]
]、
コメント：false、
コンパクト：本当、
縮小：true
}
}
};
「」
これで皆さんがこの問題に合格できることを願っています。 乾杯。

@GeorgianSorinMaxim問題は、私のjestアプリが.babelrcファイルを無視し、 babel.config.jsに変更すると問題が解決することですが、とにかく解決しました。私の答えはこのコメントの上にあります。

@GeorgianSorinMaxim @hoaiduyitに感謝します。最終的には、babel-jest用のカスタムトランスフォーマーを作成するだけで解決しました。 必要に応じて他の変更はありません。

Babel 7が正しく動作するには、 babel.config.jsが必要なようです。babelrcの代わりにそれを使用してください

babel-jestまだBabel 6のbabel-core依存しています。Babel7を使用する場合は、次を使用できます。
このトランスフォーマーbabel7-jest

babel-jestはbabel 7で問題なく動作し、カスタムトランスフォーマーは必要ありません

@SimenB .babelrc名前をbabel.config.jsが、予期しないトークンでそのエラーが表示されます。 ただし、babel7-pre.42で動作します。 他によく見落とされているものはありますか？ ：） ありがとう。

@alexindigo babel.config.js書き方についてはこちらをご覧ください

https://babeljs.io/docs/en/configuration

ええ、 yarn upgrade --latest実行すると問題が修正されました:)

@alexindigo @hoaiduyit babel.config.jsについて、いったいどうやってこれを理解したのですか？ 同じ問題と戦い、あなたの解決策を見つけて、私は自分自身に考えていました... _ "うーん、これがうまくいく方法はありませんが、とにかくやってみます。" _しかし、確かにそれはlulzをしました。 ありがとう

ジェストと酵素の構成：package.jsonに次のコードを追加します

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

酵素のセットアップ用=> setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

setupTestFrameworkScriptFileの場合：setupTests.js global.fetch = require（ 'jest-fetch-mock'）

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

.tsxファイルだけが同じ問題に直面していますか？

ニュースを広めるだけで、Jest v24は内部でBabel 7を使用するように更新され、 babel bridgeまたはbabel7-jestを使用する必要がなくなりました。
https://twitter.com/i/web/status/1088904207653105664

.babelrc名前をbabel.config.jsに変更し、Babel7にアップグレードしても、以前と同じエラーが発生します。 私のbabel.config.jsファイル：

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

@babel/preset-reactをインストールして、 babel.config.jsファイルに追加しました。 エラーを修正しました。

__test__ディレクトリ内に置いたため、 babel.config.jsファイルがbabel-jestによって検出されません__test__ 。 package.jsonが置かれているトップディレクトリに移動し、すべてが機能しました。

私は次のことを行うことで同様の問題を解決しました：

1-酵素セットアップファイルを追加し、以下を記述します。

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

2-次のようにjest構成をpackage.jsonに追加します。

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3-ルートパスに.babelrcファイルを追加し、次のように記述します。

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

4-テストで「expect」キーワードでエラーが発生した場合は、 npm install -D chaiを実行し、 import { expect } from 'chai';ようにテストコードにexpect関数をインポートします。

それでもエラーが発生する場合は、そのようなbabel依存関係をインストールしてみてくださいnpm install -D @babel/core @babel/preset-env @babel/preset-react

お役に立てれば。

3日後、私はこの問題の解決策を見つけました。
これには2つの解決策があります。

解決策1：解決策1：

ファイル名を.babelrcからbabel.config.jsに変更でき、これは機能します。

私の解決策：

私は.babelrcファイルを持っていなかったので、逆の操作も機能するはずだと考え、代わりにbabel.config.jsのプリセット情報を使用して.babelrcファイルを作成しました。 （追加のファイルを作成しましたが、元のファイルの名前は変更しませんでした）
テストを再度実行すると、新しいエラーRequires Babel "^7.0.0-0", but was loaded with "6.26.3" 。
私はそのエラーをグーグルで検索しました、そしてそれは私をここに導きましnpm install [email protected] ）に従い、テストが実行され、合格しました。

ニュースを広めるだけで、Jest v24は内部でBabel 7を使用するように更新され、 babel bridgeまたはbabel7-jestを使用する必要がなくなりました。
https://twitter.com/i/web/status/1088904207653105664

Jest v24にアップグレードすると、この問題が修正されました:)

unexpected tokenエラーが発生する

> 10 | const browser; （最後のセミコロン）

私のpackage.json

 "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "assert": "^1.4.1",
    "chai": "^4.2.0",
    "jest-puppeteer": "^4.0.0",
    "screen-info": "^1.0.1",
    "screenres": "^2.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-jest": "^24.3.0",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "puppeteer": "^1.13.0"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@babel).+\\.js$"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        },
      },
      'jest'
    ]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  }
}

テスト済みのhoaiduyitソリューション。 それは動作します。 私はただbabel.config.jsを追加し、jest.config.jsにbabel-jestトランスフォーム/トランスパイルjestをインストールする必要があります

3日後、私はこの問題の解決策を見つけました。
これには2つの解決策があります。

解決策1：解決策1：

ファイル名を.babelrcからbabel.config.jsに変更でき、これは機能します。

解決策2：解決策2：

私はこのように使用しています。
次のような変換ファイルを作成します（私のものはjest-transforme.js ）：

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

これが私のjest.config.jsです：

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

そして、私はまだ私の.babelrc持っています

const enviroments = require("./env-config.js");

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          useBuiltIns: "entry"
        }
      }
    ]
  ],
  plugins: [
    ["styled-components", { ssr: true, displayName: true, preprocess: false }],
    [
      "module-resolver",
      {
        root: ["./"]
      }
    ]
  ],
  env: {
    dev: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    build: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    production: {
      presets: [
        [
          "minify", // why add minify here, we run uglify over the whole code bundles
          {
            mangle: false,
            evaluate: false
          }
        ]
      ],
      plugins: [
        ["transform-define", enviroments],
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["module-resolver", { root: ["./"] }]
      ],
      comments: false,
      compact: true,
      minified: true
    }
  }
};

これで皆さんがこの問題に合格できることを願っています。 乾杯。

あなたの方法のためのtks〜この方法は私の問題を正しく修正することができます！

こんにちは-私はこのスレッドでいくつかのことを試しましたが、何も機能していないようです。 主なエラーは奇妙なb / cであり、ソースコードと実行しようとしている実際のコードが整列していないように、意味をなさない行番号を指しているようです。

このエラー、Jestは予期しないトークンを検出しましたが、残ります。 私はJest> 24を使用しており、タイプスクリプトはありません。ごく最近（6か月前〜）にreact-create-appが排出されました。 キャッシュをクリアしてnode_modulesを削除しても効果はありませんでした。 おそらく誰かが、jestが適切に変換して実行するために必要な構成と、私の正確なエラーが与えるヒントを正確に説明することができます...

FAIL  __e2e__/chat/sms.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/ben/dev/app/webui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 |   afterEach(async () => {
       6 |     await logout();
    >  7 | 
         | ^
       8 |     await page.evaluate(() => {
       9 |       localStorage.clear();
      10 |     });

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (__e2e__/chat/sms.spec.js:7:49)

皆さん、ありがとうございました、

Jenkinsはこの問題が原因で失敗しますが、いくつかの実用的な解決策はありますか？

Create-React-Appを使用している場合、CRAを使用するとpackage.jsonで変更できるのは特定のjest構成のみであるため、package.jsonにtransformignorepatternsを追加しても問題は解決しません。

Jestが内部ライブラリを取得する際に問題が発生しました。このライブラリからインポートした場合、Jestは「予期しないトークン」エラーを表示していました。

これを解決するには、テストスクリプトを次のように変更します。
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

みなさん、こんにちは。私はJetSetと呼ばれ、ReactNativeで記述された小さなプロジェクトで単体テストを行うのに苦労していました。 私はこの問題を解決するために2日間検索し、babel.config.jsのようなものを編集し、そのファイルを削除してから.babelファイルを作成しようとしました（そしていくつかのたわごとを追加しました）。

_バグレポート：_
D：\ jetset \ JetSetApp> jest SaveData.test.js
FAIL __test __ / SaveData.test.js
●テストスイートの実行に失敗しました

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

D:\jetset\JetSetApp\node_modules\expo-file-system\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as FileSystem from './FileSystem';
                                                                                                ^

SyntaxError: Unexpected token *

  1 | import React, { Component } from 'react'
  2 | import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
> 3 | import { documentDirectory, getInfoAsync, readDirectoryAsync, readAsStringAsync, writeAsStringAsync, deleteAsync } from 'expo-file-system';
    | ^
  4 |
  5 | /**
  6 |  * This class primarily serves to handle files within the phone system so that results can be stored

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (app/resources/SaveData/SaveData.js:3:1)

テストスイート：1つ失敗、合計1つ
テスト：合計0
スナップショット：合計0
時間：3.509秒
/SaveData.test.js/iに一致するすべてのテストスイートを実行しました。

_ babel.config.js _
module.exports = function（api）{
api.cache（true）;
戻る {
プリセット：['babel-preset-expo']、
};
};

_ package.json _
{{
"main"： "node_modules / expo / AppEntry.js"、
「スクリプト」：{
「スタート」：「エキスポスタート」、
"android"： "expo start --android"、
"ios"： "expo start --ios"、
"web"： "expo start --web"、
「イジェクト」：「エクスポイジェクト」、
「テスト」：「冗談」
}、
「冗談」：{
「プリセット」：「react-native」
}、
「依存関係」：{
"expo"： "^ 34.0.1"、
"expo-file-system"： "^ 6.0.2"、
"expo-mail-composer"： "^ 6.0.0"、
"モーメント"： "^ 2.24.0"、
"react"： "16.8.3"、
"react-dom"： "^ 16.8.6"、
"react-native"： " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz "、
"react-native-gesture-handler"： "^ 1.3.0"、
"react-native-selection-group"： "^ 1.1.2"、
"react-native-web"： "^ 0.11.4"
}、
"devDependencies"：{
"@ babel / core"： "^ 7.6.2"、
"@ babel / preset-env"： "^ 7.6.2"、
"babel-jest"： "^ 24.9.0"、
"babel-preset-expo"： "^ 6.0.0"、
"jest"： "^ 24.9.0"、
"prop-types"： "^ 15.7.2"、
"react-native-dismiss-keyboard"： "^ 1.0.0"、
"react-native-modal-datetime-picker"： "^ 7.5.0"、
"react-navigation"： "^ 3.12.1"
}、
「プライベート」：true
}

参考までに、NODE_ENV = "test"が設定されていないとビルドシステム全体がうまく動作しなかったように、これに対する本当にばかげた解決策を見つけたと思います。

React Jestの新しいバージョンでは、したがってpackage.jsonに組み込まれているため、テストスクリプトは次のようになります。
"test": "react-scripts test"
それ以外の
"test": "jest"

React Jestの新しいバージョンでは、したがってpackage.jsonに組み込まれているため、テストスクリプトは次のようになります。
"test": "react-scripts test"
それ以外の
"test": "jest"

どうもありがとう、それは私にとって問題を解決しました！

LOTを試した後、私にとっての問題：
.babelrcファイルに"transform-es2015-modules-commonjs",がありません

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-flow-strip-types",
    "jsx-control-statements",
    "import-glob",
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

"jest"： "^ 24.9.0"、
"babel-jest"： "23.6.0"、

あなたのjestとbabel-jestを更新してみてください

.babelrc名前をbabel.config.jsに変更し、Babel7にアップグレードしても、以前と同じエラーが発生します。 私のbabel.config.jsファイル：

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

@babel/preset-reactをインストールして、 babel.config.jsファイルに追加しました。 エラーを修正しました。

これで問題が修正されました。@ babel / prefix-envをインストールしてbabel.config.jsに追加すると、修正されました。

ありがとう@jmayergit

babel.rcファイルをbabel.config.jsファイルに変更しましたが、機能しませんでした。 それから私はこの答えを見ました： https ：
インポートプラグインがある場合は、テスト、開発、本番環境のプラグインを分離します。

私のbabel.config.jsファイルは次のようになります。

module.exports = {
  presets: [
    [
      'next/babel',
    ],
  ],
  env: {
    test: {

    },
    dev: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
    production: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
  },
};

私も5日からこのエラーに苦しんでいます

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".   

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\Users\SK-PC\Desktop\React-Course\expansify\src\test\components\MyNavbar.test.js: Unexpected token (5:28)

      3 | import { MyNavbar } from '../../components/MyNavbar'
      4 | test("Should return MyNavbar component", () => {
    > 5 |     const wrapper = shallow(<MyNavbar />)
        |                             ^
      6 |     expect(wrapper.find('.navbar-brand').find('kbd').text()).toBe("Expensify")
      7 |     // const renderer = new ReactShallowRenderer()
      8 |     // renderer.render(<MyNavbar />)

      at Parser._raise (node_modules/@babel/parser/src/parser/location.js:241:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/location.js:236:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/location.js:220:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1144:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:539:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:519:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:311:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:263:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:211:21)

 PASS  src/test/reducers/filters.test.js

Test Suites: 1 failed, 5 passed, 6 total
Tests:       29 passed, 29 total
Snapshots:   0 total
Time:        12.144s
Ran all test suites.

@fullstacksk

React Jestの新しいバージョンでは、したがってpackage.jsonに組み込まれているため、テストスクリプトは次のようになります。
"test": "react-scripts test"
それ以外の
"test": "jest"

次の場所でドキュメントを読むことができます。
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@ catmans1
create-react-appやreact-scriptsのような依存関係をインストールしていません。
それは機能しますか？
"test": "react-scripts test"
それ以外の
"test": "jest"

envとreactでオプションをテストするためにbabel-preset-jestを使用したとき、これは機能しています。 babel-jeastを削除しました。

私のために働いた： babel.config.js 「@babel / preset-react」を含める

https://medium.com/@audreyhal/how -to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a

愚かな間違いを犯し、最初のテストファイルを.tsx拡張子ではなく.ts書き込んだ後、このエラーが発生しました。 元の問題からはほど遠いですが、誰かに役立つかもしれませんが😄