[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
2022-02-10 07:50:02
質問
これは私の jestの設定 を package.json ファイルから取得します。
"jest": {
"automock": false,
"browser": true,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"transform": {
"^.+\\.jsx?$": "./node_modules/babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
},
"testEnvironment": "jsdom",
"testPathDirs": [
"./app/tests"
],
"testRegex": ".*.test.js",
"verbose": true
}
そして、私のルートフォルダにある .babelrc ファイル。
{
"plugins": ["syntax-dynamic-import", "transform-runtime"],
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
}
}
}
jestのドキュメントによると スタートアップページ これが、babelが魔法をかけるために必要なすべてです。
それはともかく、このテスト。
import React from 'react';
import {shallow} from 'enzyme';
import Landing from '../components/Landing.component';
describe('<Landing/>', () => {
it('should render a header to the page', () => {
const landing = shallow(<Landing/>);
expect(landing.find('h1').text()).toBe('This is the Landing component');
});
});
を返します。
FAIL app/tests/Landing.component.test.js
● Test suite failed to run
/Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
何が間違っているのでしょうか?
どうすればいいですか?
Jestはenv変数をtestに設定するので、.babelrcのenv設定に私のプリセットを追加する必要がありました。
{
"plugins": ["syntax-dynamic-import", "transform-runtime"],
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": ["es2015", "react", "stage-0"]
}
}
}
関連
-
[解決済み] Next.jsでWebSocketを利用する
-
[解決済み] Jestを使用して単一のテストを実行するにはどうすればよいですか?
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] Jestを使用して1つのファイルをテストするにはどうすればよいですか?
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] ESLintとTSLintの違い【クローズド】について
-
[解決済み] Jestの'it'と'test'の違いは何ですか?
-
[解決済み】「SyntaxError: 予期しないトークン < in JSON at position 0".
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み] reactでonloadを使うには?
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] 矢印本体を囲む予期せぬブロックステートメント
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法