Jest: Jest가 React 앱에서 예기치 않은 토큰을 발견했습니다.

나도 같은 문제가 있습니다.

동일한 문제가 있습니다.

동일한 문제가 여기에 있습니다. monorepo로 작업할 때 약간 더 복잡합니다.

@fabioSalimbeni @hoaiduyit @mikedloss 내 React 및 React Native 테스트( Jest 및 enzyme )를 Babel 7을 사용하여 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'
        }
    ]
};

이것이 webApp1 대한 내 babel.config.js 모습입니다. monorepo 앱 중 하나:

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 = {};

또한 일부 Babel 플러그인과 babel-core 버전을 각 앱의 package.json 에 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:

파일 이름을 .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 환경 = require("./env-config.js");

module.exports = {
사전 설정: [
[
"다음/바벨",
{
"사전 설정 환경": {
useBuiltIns: "항목"
}
}
]
],
플러그인: [
["스타일 구성 요소", { ssr: true, displayName: true, 전처리: false }],
[
"모듈 해결사",
{
루트: ["./"]
}
]
],
환경: {
개발자: {
플러그인: [
["변환 정의", 환경],
["모듈 해석기", { 루트: ["./"] }],
"변형-데코레이터-레거시",
"변환 클래스 속성"
]
},
짓다: {
플러그인: [
["변환 정의", 환경],
["모듈 해석기", { 루트: ["./"] }],
"변형-데코레이터-레거시",
"변환 클래스 속성"
]
},
생산: {
사전 설정: [
[
"minify", // 왜 여기에 minify를 추가합니까? 전체 코드 번들에 대해 uglify를 실행합니다.
{
맹글: 거짓,
평가: 거짓
}
]
],
플러그인: [
["변환 정의", 환경],
["@babel/plugin-proposal-decorators", { 레거시: true }],
["@babel/plugin-proposal-class-properties", { 느슨한: true }],
["모듈 해석기", { 루트: ["./"] }]
],
댓글: 거짓,
컴팩트: 사실,
축소: 사실
}
}
};
````
이것이 여러분이 이 문제를 통과할 수 있기를 바랍니다. 환호.

@GeorgianSorinMaxim 문제는 내 농담 응용 프로그램 무시입니다 .babelrc 파일을, 그리고로 변경 babel.config.js 문제를 해결하지만, 어쨌든 그것을 해결, 내 대답이 댓글의 이상입니다.

@GeorgianSorinMaxim @hoaiduyit 덕분에 결국 babel-

Babel 7이 제대로 작동하려면 babel.config.js 가 필요한 것 같습니다. babelrc 대신 사용하십시오.

babel-jest 여전히 Babel 6의 babel-core 의존합니다. Babel 7 을 사용하려면 사용할 수 있습니다.
이 변압기 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했습니다. 감사 해요

Jest 및 효소 구성 : 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$"
    ]
  }

Enzyme => 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 파일에 추가했습니다. 오류를 수정했습니다.

내 babel.config.js 파일은 __test__ 디렉토리에 넣었기 때문에 babel-jest 의해 감지되지 않았습니다. package.json 가 있는 최상위 디렉토리로 이동했고 모든 것이 작동했습니다.

다음을 수행하여 비슷한 문제를 해결했습니다.

1- 효소 설정 파일을 추가하고 다음을 작성하십시오.

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

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

2- 다음과 같이 package.json에 jest 구성을 추가합니다.

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

3- 루트 경로에 .babelrc 파일을 추가하고 다음을 작성하십시오.

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

4 - 당신이 오류가 바로 실행 테스트에서 키워드를 "기대"가지고있는 경우 npm install -D chai 와 같은 테스트 코드에서이 기능을 기대 수입 import { expect } from 'chai';

여전히 오류가 발생하면 npm install -D @babel/core @babel/preset-env @babel/preset-react 와 같은 babel 종속성을 설치하십시오.

도움이 되었기를 바랍니다.

3일 후에 이 문제에 대한 해결책을 찾았습니다.
이를 위한 2가지 솔루션이 있습니다.

솔루션 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; (끝의 세미콜론)

내 패키지.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 transform/transpile jest를 설치하면 됩니다.

3일 후에 이 문제에 대한 해결책을 찾았습니다.
이를 위한 2가지 솔루션이 있습니다.

솔루션 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 = {
  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, no type script에 있습니다. 최근에(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이라고 하고 React Native로 작성된 작은 프로젝트로 단위 테스트를 수행하는 데 어려움을 겪고 있었습니다. 이 문제를 해결하기 위해 2일 동안 검색했고 babel.config.js와 같은 것을 편집하고 해당 파일을 삭제한 다음 .babel 파일을 생성(그리고 약간의 추가)하려고 했습니다.

_버그 신고:_
D:\jetset\JetSetApp>jest SaveData.test.js
실패 __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 = 함수(api) {
api.cache(참);
반품 {
사전 설정: ['babel-preset-expo'],
};
};

_ 패키지.json _
{
"메인": "node_modules/expo/AppEntry.js",
"스크립트": {
"시작": "엑스포 시작",
"안드로이드": "엑스포 시작 --android",
"ios": "엑스포 시작 --ios",
"웹": "엑스포 시작 --웹",
"꺼내기": "엑스포 꺼내기",
"테스트": "농담"
},
"농담": {
"사전 설정": "반응 네이티브"
},
"종속성": {
"엑스포": "^34.0.1",
"엑스포 파일 시스템": "^6.0.2",
"expo-mail-composer": "^6.0.0",
"순간": "^2.24.0",
"반응": "16.8.3",
"react-dom": "^16.8.6",
"반응 네이티브": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"반응 네이티브 제스처 처리기": "^1.3.0",
"반응 네이티브 선택 그룹": "^1.1.2",
"반응 네이티브 웹": "^0.11.4"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"바벨 농담": "^24.9.0",
"babel-preset-expo": "^6.0.0",
"농담": "^24.9.0",
"소품 유형": "^15.7.2",
"react-native-dismiss-keyboard": "^1.0.0",
"react-native-modal-datetime-picker": "^7.5.0",
"반응 탐색": "^3.12.1"
},
"비공개": 사실
}

참고로 저는 NODE_ENV="test"가 설정되지 않은 경우 전체 빌드 시스템이 제대로 작동하지 않는 것처럼 이것에 대한 정말 어리석은 해결책을 찾은 것 같습니다.

최신 버전의 React Jest는 package.json에 내장되어 있으므로 테스트 스크립트는 다음과 같아야 합니다.
"test": "react-scripts test"
대신에
"test": "jest"

최신 버전의 React Jest는 package.json에 내장되어 있으므로 테스트 스크립트는 다음과 같아야 합니다.
"test": "react-scripts test"
대신에
"test": "jest"

덕분에 문제가 해결되었습니다!

많이 시도한 후 문제는 다음과 같습니다.
.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"
      }
    ]
  ]
}

"농담": "^24.9.0",
"바벨 농담": "23.6.0",

농담과 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/preset-env를 설치하고 babel.config.js에 추가하고 수정했습니다.

@jmayergit 감사

babel.rc 파일을 babel.config.js 파일로 변경했지만 작동하지 않았습니다. 그런 다음이 답변을 보았습니다. https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
가져오기 플러그인이 있는 경우 테스트, 개발 및 프로덕션 환경용 플러그인을 분리합니다.

내 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 첫 번째 테스트 파일을 작성한 후 이 오류를 보았습니다. 원래 문제와는 거리가 멀지 만 누군가에게 도움이 될 수 있습니다 😄