Jest: ES6 모듈에 대한 예기치 않은 토큰 가져오기

React-Native 및 Jest와 동일한 문제가 있습니다.
다음을 사용하여 새 프로젝트를 시작하는 경우:
반응 네이티브 초기화 AwesomeProject
CD 어썸프로젝트

그런 다음 npm install native-base --save와 같은 모듈을 설치하십시오.
기본 기반에서 index.ios.js 파일로 구성 요소 가져오기

npm 테스트에서 다음 오류가 발생합니다.
../test/node_modules/native-base/index.js:4
'./Components/vendor/react-native-drawer'에서 서랍 가져오기;
^^^^^^
SyntaxError: 예기치 않은 토큰 가져오기

http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -customization 참조

동일한 문제가 있습니다. @cpojer가 제공한 링크가 도움이 되지 않는 것 같습니다 😕

안녕하세요! 'transformIgnorePatterns'는 ....mmmm...해야 합니다 - 무시)
그러나 node_modules의 패키지에서 가져오기를 어떻게 사용할 수 있습니까?

이 소품이 도움이 되었습니다 :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
현재 내 Jest 구성은 다음과 같습니다.

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... 그리고 그것은 나를 위해 일하고 있습니다 :)

안부 인사, Pavel Tretyakov

안녕하세요 여러분, 나는 여전히이 문제를 겪고 있지만 반응 네이티브를 사용하고 있지 않습니다. 문제는 항상 jest --no-cache를 사용하여 수정됩니다. 이 오류를 던지지 않고 캐시를 사용하여 농담을 할 수 있는 방법이 있습니까?

이 변환이 내 create-react-app 애플리케이션에서 작동하도록 할 수 없습니다. ES6 가져오기가 포함된 모든 테스트 파일에서 항상 "예기치 않은 토큰 가져오기"가 표시됩니다. 내가 찾을 수 있는 모든 제안을 시도했습니다. no-cache는 영향이 없습니다. 분명히 변환에서 이러한 파일을 무시할 수 없습니다(변환해야 합니다!).

나는 포기한다. 필요한 정보를 제공하게 되어 기쁩니다.

저도 이 문제를 겪고 있는 것 같습니다.

여기도 마찬가지

여기도 마찬가지

Node에서 ES 모듈이 지원되지 않고 브라우저로 배송할 때 빌드 파이프라인(웹팩, 롤업)으로 컴파일하는 것을 의도적으로 중단했기 때문에 이 문제가 발생할 가능성이 높습니다.

babelrc의 "테스트" 환경을 위해 ES 모듈에서 CommonJS로 컴파일을 활성화해야 합니다( https://babeljs.io/docs/usage/babelrc/#env -option 및 https://babeljs.io/docs/ 참조). 플러그인/transform-es2015-modules-commonjs/

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

답변 감사합니다, cpojer. 어제 jest가 전역적으로 작동했지만 노드 스크립트를 사용하는 동안에는 작동하지 않았기 때문에 어제 노드 환경 설정을 제거하고 기본 노드 환경으로 실행했습니다. 문제를 해결하는 것 같았으므로 내 문제는 node-env 설정에 있었던 것 같습니다. 그러나 여전히 모니터링해야 할 사항입니다.

편집: 이것은 전혀 작동하지 않았습니다. @cpojer 의 수정은 매력처럼 작동했습니다. 감사 해요.

@cpojer 의 수정 사항이 저에게

굉장합니다, 또한 저를 위해 일했습니다, 감사합니다!

상당히 간단한 반응 네이티브 앱에서 비슷한 문제가 있습니다.

npm test 또는 jest 하면 'SyntaxError: Unexpected token import' 가 반환됩니다.

.babelrc

{
"presets": ["react-native"]
}

.패키지.json

{
  "name": "BeeAppy",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.8.2",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-test-renderer": "^16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

@cpojer 가 제안한 env 스니펫이
정말 뻔했다면 죄송합니다!
어떤 도움이 될 것입니다, 감사합니다

@JessicaBarclay .babelrc 구성에 들어가야 합니다. 이와 같이:

"env": {
          "development": {
                 "plugins": ["transform-es2015-modules-commonjs"]
          }
}

아 감사합니다 @rlage ! 정렬:)

FWIW, 실제로 @cpojer 가 제안한 것과 같은 테스트 환경에서 올바른 presets 및 plugins .babelrc 설정했지만 NODE_ENV=test 를 포함하는 것을 잊었습니다. package.json .

이전에는 "예기치 않은 토큰 가져오기"가 실패했습니다.

"scripts": {
  ...
  "test": "jest",
}

파일을 성공적으로 변환한 후:

"scripts": {
  ...
  "test": "NODE_ENV=test jest",
}

@jlyman

Jest 문서를 기반으로 Jest가 기본적으로 테스트하도록 NODE_ENV를 설정하기 때문에 필요하지 않아야 합니다.

참고: Babel의 env 옵션을 사용하여 더 복잡한 Babel 구성을 사용하는 경우 Jest가 자동으로 NODE_ENV를 테스트로 정의한다는 점에 유의하십시오. NODE_ENV가 설정되지 않은 경우 기본적으로 Babel과 같은 개발 섹션을 사용하지 않습니다.

이 .babelrc는 나를 위해 일한 것입니다.

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

참고: 이상해 보이지만 개발 키와 테스트 키가 모두 있어야 합니다. 그렇지 않으면 작동하지 않습니다.

그럼 난 그냥 전화 :

node_modules/.bin/jest

또는 package.json을 사용하여:

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

테스트를 위해 NODE_ENV를 설정할 필요가 없습니다.

@laszbalo 흥미롭게도 두 번째 env 의 존재는 트릭을 수행하는 것 같습니다. 개발 환경에 추가하고 스크립트에서 명시적인 NODE_ENV 접두사를 제거하면 작동합니다. 나는 문서의 그 부분도 읽었지만 효과가 있었기 때문에 그 솔루션으로 끝났습니다.

@jlyman 문서의 솔루션은 무엇입니까?

@doudounannan 명확하지 않은 경우 죄송합니다. 내가 가졌던 해결책은 내가 여기에 게시한 것 입니다. @laszbalo가 말했듯이 이것은 Using Babel 에서 문서가 말하는 것과 어긋나지 만 NODE_ENV test 의 직접 주입이 작동하는 것 같습니다.

이상하게도 "transformIgnorePatterns": [ ] 하면 babel이 테스트한 파일을 변환하지만 transformIgnorePatterns 옵션을 제외하면 babel은 아무 것도 하지 않습니다... 테스트용으로만 간단한 .babelrc가 있습니다. 프로덕션에는 webpack을 사용하지만 jest의 테스트에는 사용하지 않음):

{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

https://github.com/facebook/jest/issues/2550#issuecomment -290812720에서 아이디어를 얻었습니다. #770 또는 여기에 있는 다른 항목이 도움이 되지 않았기 때문입니다...

내가 무엇을 하든지 상관없이 항상 같은 오류입니다.

    /.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)
      at Object.<anonymous> (node_modules/react-native-gifted-chat/src/GiftedChat.js:10:29)

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "development": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
            "cwd": "babelrc",
        }]
  ]
}

"jest": {
    "preset": "react-native",
    "setupFiles": [
        "./__tests__/setup.js"
    ],
    "testRegex": "/__tests__/.*\\.spec\\.js$"
}

같은 문제가 있습니다. 나는 농담에 다음을 추가했다.

"jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
          "node_modules/(?!react-native|react-navigation)/"
      ]
  }

이제 Jest를 실행할 때 다음 오류가 발생합니다.

ReferenceError: 0에서 "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc"에 지정된 알 수 없는 플러그인 "transform-replace-object-assign", "/Users/caalcaz/를 기준으로 해결하려고 시도했습니다. Documents/Projects/Enterprise-app/node_modules/enzyme"

@calcazar node_modules/enzyme/.babelrc에 무엇이 있습니까?

babel-jest _and_ ts-jest를 사용하여 해결했습니다. package.json에서:

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "globals": {
        "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest
    "testRegex": "test/.*\\.spec\\.ts$",
    "setupFiles": [
        "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
        "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    // some coverage and results processing options
},

그런 다음 .babelrc에서(테스트용으로만 사용)

{
    "env": {
        "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

그것이 누군가를 돕기를 바랍니다! (이것은 aurelia 앱용이므로 YMMV)

@thinkOfaNumber

이것이 내가 보는 것입니다. 참고로 저는 Enzyme V3.0을 실행 중입니다.

{
  "presets": ["airbnb"],
  "plugins": [
    ["transform-replace-object-assign", "object.assign"],
  ],
}

@thinkOfaNumber 제안을 게시

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest

꼭 필요한 부분입니다. 정말 고맙습니다!

@rochapablo 같은 곳. 행운이 있나요?

Noop, 지금은 오류를 발생시키는 특정 파일 테스트를 무시하고 있습니다.

수행원. 나는 같은 문제가 있으며 지금까지 아무것도 해결하지 못하는 것 같습니다.

팔로우도

@rochapablo 이 문제를
나는 또한 당신이 언급 한 문제 때문에 자식으로 GiftedChat 구성 요소를 테스트 할 수 없습니다 ...

@todorone , 다음을 추가하십시오.

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo 힌트를 주셔서 감사하지만 불행히도 도움이되지 않았습니다. transformIgnorePatterns 정규식으로 더 플레이하려고 시도했지만 도움이 되지 않았습니다.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
농담에 위의 내용을 추가하십시오

@rochapablo jest-expo 프리셋 해보 셨나요? 행운이 있나요? transformIgnorePatterns 또 다른 구문 문제가 발생했습니다.

여전히 나를 위해 작동하지 않습니다. 빌어먹을 가져오기 오류가 발생합니다.

@testacode 동적 import 필요한 babel 플러그인을 추가했습니까? https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2 하단 참조

@SimenB 감사합니다, 그것이 내가 놓친 것입니다!

흥미 롭군. 일부 최근 업데이트는 babel-jest의 자동 추가를 제거했습니다. 그래서 실행 :

npm install babel-jest --save-dev

구성에 NOTHING ELSE를 추가하면 문제가 해결되었습니다. 더 이상 포함되지 않는다는 오류 메시지가 더 명확해야한다고 생각합니다 ...

babel-jest를 설치하여 해결했습니다.
npm i babel-jest

또한 다음 내용으로 .babelrc 파일을 만드는 것을 잊지 마십시오.

{
    "presets": ["env", "react"]
}

이것은 나를 위해 작동합니다.

.babelrc :

{
    "presets": ["env", "stage-3"],
    "plugins": ["transform-class-properties"]
}

package.json :

"scripts": {
    "test": "jest --forceExit"
},
"devDependencies": {
    "babel-core": "^6.11.4",
    "babel-jest": "^21.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "^21.2.0"
}

@hqro 그것은 나를 위해 일했습니다, 감사합니다 👍

저에게는 .babelrc 파일에 다음이 있었습니다.

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ]
}

그리고 "테스트" 환경이 대신 모듈을 사용하는지 확인하기만 하면 됩니다.

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "presets": ["react", "env"],
    }
  }
}

@nemoDreamer 하나의 구성에서 플러그인과 사전 설정을 반복하지 않는 것이 좋습니다

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"],
    }
  }
}

무엇을 시도하든 오류가 발생했습니다.

> cross-env NODE_ENV=test jest --no-cache

 FAIL  src\views\Pay\__tests__\Pay.test.js
  ● Test suite failed to run

    C:\Users\***\Documents\Project\***\node_modules\ne-rc\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Alert from './Alert';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      11 |  * <strong i="6">@param</strong> {Array<Object>} [data] 每一种分期的详细信息 data=[{},{}...]
      12 |  * <strong i="7">@param</strong> {Number} [defaultSelected] 默认选中的下标
    > 13 |  * <strong i="8">@param</strong> {Funtion} [onClick] 点击触发事件
      14 |  * <strong i="9">@param</strong> {Number} [columnNum] 一行有多少列
      15 |  *
      16 |  * <strong i="10">@example</strong>

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/Installment/Installment.jsx:13:13)
      at Object.<anonymous> (src/components/Installment/index.js:8:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.693s

여기 내 구성 파일이 있습니다.

* .babelrc *

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    // webpack understands the native import syntax, and uses it for tree shaking

    "es2015",
    "stage-2",
    // Specifies what level of language features to doPay.

    // Stage 2 is "draft", 4 is finished, 0 is strawman.

    // See https://tc39.github.io/process-document/

    "react"
    // Transpile React components to JavaScript
  ],
  "env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

패키지.json

{
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./server/server.js",
    "api": "cross-env NODE_ENV=api node ./server/server.js",
    "clean": "rm -rf dist",
    "dist": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --progress --colors",
    "online": "cross-env NODE_ENV=development node ./server/online.js",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./src --fix",
    "test": "cross-env NODE_ENV=test jest --no-cache",
    "test:watch": "npm test --watch",
    "stats": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --profile --json > stats.json",
    "gatest": "node ./service/gatest.js"
  },
  "pre-commit": [
    "lint"
  ],
  "jest": {
    "verbose": true,
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "./test/setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "md"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "asset-inject-html-webpack-plugin": "^0.9.1",
    "autoprefixer": "^7.1.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "better-npm-run": "0.1.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.1.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "deepmerge": "^2.0.1",
    "enzyme": "^3.3.0",
    "eslint": "^4.5.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.6.4",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.6",
    "git-repo-info": "^1.4.1",
    "glob": "^7.1.2",
    "happypack": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "idb": "^2.0.4",
    "imports-loader": "^0.7.0",
    "jest": "^22.4.2",
    "lodash.range": "^3.2.0",
    "mocha": "^5.0.0",
    "node-sass": "^4.5.3",
    "node-xlsx": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "pre-commit": "^1.2.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "regenerator-runtime": "^0.11.1",
    "request": "^2.74.0",
    "require-reload": "^0.2.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "sinon": "^4.2.0",
    "style-loader": "^0.19.1",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "worker-loader": "^1.1.0"
  }
}

@kisnows https://stackoverflow.com/questions/46065371/reactjest-syntaxerror-unexpected-token-import
https://segmentfault.com/n/1330000012786721

.babelrc 에서 사전 설정을 설정할 때 다음과 같이 "env" 가 대괄호 ["env"] 사이에 있는지 확인하십시오.

  "env": {
    "test": {
      "presets": [["env"], "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

특히 구성에 "modules: false" 있는 경우.

또한 기본적으로 jest는 node_modules 파일을 변환하지 않습니다 . cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

이것이 import ... 가 node_modules 파일에서 작동하지 않는 이유입니다. 이것을 비활성화하려면 다음을 추가할 수 있습니다.

transformIgnorePatterns: []

당신의 농담 구성에.

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

@florentchauveau 감사합니다. 이 작업이 저에게 효과적입니다.

@todorone @rochapablo 이것에 대한 해결책을 찾으셨습니까? 나도 같은 문제에 직면해 있다-

    import * as React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)

다음을 사용하는 구성 요소 테스트에서만 이 오류가 발생합니다.
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
@expo/react-native-action-sheet 가 ES6 모듈로 배송되고 있고 GiftedChat 가 내부적으로 사용하고 있기 때문일까요? 그러나 jest / ts-jest (확실하지 않음) 사전 설정이 추가되면 처리해야 합니다. 여기 내 Jest 구성이 있습니다 -

    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
            "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!rn-placeholder|react-native|react-navigation|native-base|react-native-datepicker|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
        ],
        "setupTestFrameworkScriptFile": "<rootDir>/src/__mocks__/Adapter.js",
        "testRegex": "(\\.(test|spec))\\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\\.snap$",
            "<rootDir>/node_modules/",
            "<rootDir>/lib/"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
        },
        "cacheDirectory": ".jest/cache"
    },

그리고 .babelrc -

{
    "presets": ["react-native"]
}

위에서 언급한 거의 모든 솔루션을 시도했습니다. 그들 중 누구도 내 시나리오에서 작동하지 않았습니다. 도움이 필요한.

@omkarjoshi-cc 내가 작업하고 있던 시간에 나를 위해 일한 유일한 것은 오류를 발생시키는 패키지를 추가하는 것이었습니다. 제 경우에는 다음과 같습니다.

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo 네. 나는 그것을 시도했다. 작동하지 않았습니다. 놓칠 수 있는 다른 것이 있습니까? 이거 정말 답답합니다 😓

나는 babel 7을 사용하고 있으며 나는 여전히 "transformIgnorePatterns"에 운이 없었습니다 - 많은 다른 정규 표현식을 시도했습니다 :/

내가 가진 문제는 하나의 종속성에 기본 es6 클래스가 있고 내 소스에 이를 확장하는 클래스가 있다는 것입니다. Babel에 의해 트랜스파일된 "es5 클래스"는 네이티브 클래스를 확장할 수 없으므로 농담으로 런타임 오류가 발생합니다.

어떻게든 "babel/preset-env"가 코드가 jest(대상 노드)로 변환되는 방식을 방해하고 있다고 생각하기 시작했습니다. 이는 브라우저 대상을 따르지 않을 수 있지만 여전히 확실하지 않습니다.

.babelrc에서 'present-env'를 사용할 때 농담을 위해 모든 것을 es5로 강제하는 방법을 아는 사람이 있습니까?

내가 생각할 수 있는 유일한 해결 방법은 babel-jest를 사용하지 않고 webpack(babel-loader를 사용하고 변환할 파일이 저에게 적합함)을 실행한 다음 jest를 실행하는 것입니다. -> webpack -w 사용에 대해 생각하고 있습니다.

첨가

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat|@expo/react-native-action-sheet)"
]

나를 위해 일했다. @rochapablo 덕분에 🙌

이 문제로 어려움을 겪고 있습니다. 테스트 중인 내 출력 폴더가 import 등의 ES6 구문이어야 합니까 아니면 테스트할 수 없습니까? 내 출력 파일/파일에 commonjs가 표시되지 않습니다(react-native와 함께 사용).

나는 같은 문제에 직면하고 있으며이 페이지는 문제를 해결합니다.
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

어떤 이유로 babel-jest 대신 다음을 사용하면 저에게 효과적이었습니다 ( transformIgnorePatterns 분명히 존중)

"transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest-babel-7"
    }

btw 이 문제는 여기에서 다시 열어야 합니까? 어려움을 겪는 많은 사람들

제 경우에는 이 문제가 내 babel 구성에서 테스트 파일을 무시하여 발생한 것으로 나타났습니다. 관련 없는 이유로 내 .babelrc에 "ignore": ["**/*.test.js"] 가 있었습니다.

솔루션은 프로덕션 환경에 대해서만 무시 옵션을 설정하는 것이었습니다. 예:

"env": {
    "production": {
      "ignore": [
        "**/*.test.js"
      ]
    }
  }

또는 테스트 환경에 대해 특별한 무시 패턴을 지정할 수 있습니다.

많이 시도한 후 내 경우는 다음과 같습니다.

1. babe-jest의 올바른 버전이 있는지 확인하십시오 *
2. 사전 설정이 있는 .babelrc 구성이 있는지 확인(이전에 설치됨)
3. 여전히 "예기치 않은 토큰"이라는 오류가 발생하면 화살표 기능이 인식되지 않을 수 있습니다. 이 babel 플러그인은 "transform-class-properties"도 babel 구성에 포함하는 데 도움이 됩니다.

여기 내 구성이 있습니다.

.babelrc

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]}

효소용(setupTests.js)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-15";
configure({ adapter: new Adapter() });

패키지.json

 "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^4.19.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.6.2",
     "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "gh-pages": "^0.12.0",
    "jest": "^22.4.3",
    "react-addons-test-utils": "^15.4.2",
    "regenerator-runtime": "^0.11.1"
  },
"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

yarn add --dev babel-jest babel-core regenerator-runtime 이것을 추가하면 저에게 효과적이었습니다.

제 경우에는 Windows 및 어리석은 권한에 문제가 있었고 아마도 env 변수를 올바르게 설정하지 않았을 것입니다.
git bash에서 상승된 cmd.exe 하고 다시 작업을 시작했습니다.

나는이 jest 로 정의 된 script (이름 test:jest 로 test ) 내에서, package.json . 그러나 npm run test 실행할 때 SyntaxError: Unexpected token import 얻습니다.

root<strong i="14">@browserify</strong>:/var/machine-learning/src# npm run test

> [email protected] test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.782s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-08T01_50_42_754Z-debug.log

또한 해당 jest.config.js 정의했습니다.

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': ['/var/machine-learning/src/node_modules'],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ]
}

react-native 및 transformIgnorePatterns 대해 많은 것을 보고 있습니다. 운 좋게도 불행히도 나는 그것을 사용하지 않습니다. 이 얼마나 이해하기 힘든 버그입니다. 내가 정의해야합니까 .babelrc , 또는 추가 jest 내에서 지시어를 package.json . 이 경우 내 농담 script 이 babel에 대해 어떻게 알 수 있습니까? 나는 package.json 포함하는 동일한 디렉토리에 .babelrc 를 추가하려고 시도했지만 운이 없었습니다.

{
  "env": {
    "test": {
      "presets": ["env", "stage-2", "react"]
    }
  }
}

참고: 위의 문제와 관련하여 내 원래 문제 를 추적하려는 사람이 있는 경우.

많은 속임수 끝에 다음과 같은 문제를 발견했습니다.

• Jest는 기본적으로 babel 6을 실행합니다. Babel 6은 .babelrc.js 파일을 찾지 않습니다. .babelrc 파일에만 해당됩니다. JSON 대신 JS 구성이 있는 경우 구성을 읽지 않으므로 플러그인을 사용하지 않습니다. 결과적으로 unexpected token: import 되었습니다.
• babel-7-jest 는 이전 Babel 7 코어 엔진에서 실행되므로 새로운 제안 플러그인에 대한 지원이 중단됩니다.
• npm i -D [email protected] 문제를 완전히 수정한 것 같습니다. 내 babel 구성에 env.test 도 없고 jest 구성도 없습니다.

Jest가 babel-core (따라서 @babel/core 무시)를 찾는 것처럼 보이지만 그렇지 않으면 Babel 6으로 폴백하고 구성을 건너뜁니다. 그러나 최신 babel-core(브리지 버전)가 설치되면 추가 구성 없이 ES6 모듈을 구문 분석합니다.

kasvtv 감사합니다! 내 .babelrc.js 를 .babelrc 하고 npm i -D [email protected] . 이제 내 테스트는 babel-jest 실행됩니다.

.js 구성 파일을 안전하게 사용할 수 있습니다. Babel은 버전 7부터 이러한 유형의 파일만 읽고 Jest가 Babel 버전 7을 사용하려면 [email protected] 이 필요합니다.

관심있는 사람이 있으면 농담 + 효소 테스트가 작동합니다. 해당 구성 파일을 자유롭게 찔러보세요. 또한 동일한 프로젝트의 프론트엔드 개발을 돕는 데 관심이 있는 사람이 있습니까?

antd 및 rc-calendar 등으로 인해 유사한 문제가 발생했습니다. 라이브러리가 모듈을 가져오지 못하는 경우 해결 방법은 transformIgnorePatterns

transformIgnorePatterns: [ 'node_modules/?!(antd|rc-.+)/' ],

moduleDirectories 도움이 되었을 수 있습니다.

moduleDirectories: ['node_modules'],

최신 반응 네이티브 버전으로 업데이트하고 babel 7로 업데이트해야 했는데 이제 동일한 오류가 발생합니다.

이 node_modules를 transformIgnorePatterns 해도 더 이상 아무 것도 하지 않는 것 같습니다.

제 경우에는 더 이상 Babel을 사용하여 모듈을 변환하지 않고, babelrc의 test 부분에 다시 추가하는 방법에 대한 시작 가이드에 대한 메모가 있기 때문입니다.

@kasvtv @willb335 나는 Babel 6이 .babelrc.js를 인식하도록 하는 트릭을 사용합니다:

패키지.json

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },

@material/base 라이브러리를 사용하여 동일한 문제를 만났습니다. 누구든지 package.json & .babelrc 파일을 제공하여 해결할 수 있습니까? 위의 피드백을 시도했지만 혼동되었습니다 ...

나를 위한 해결책은 .babelrc 파일에 "env" 사전 설정을 추가하는 것이어서 다음과 같이 밝혀졌습니다.
{
"사전 설정": ["env", "es2016", "stage-0", "반응"]
}

이 링크 정보를 사용하여 내 문제를 해결했습니다.
https://jestjs.io/docs/en/webpack.html

@negarineh 링크가 작동하지 않습니다

@haywirez 가 제공하는 transformIgnorePatterns 솔루션을 사용하면

SyntaxError: Unexpected token import

오류

TypeError: Cannot read property 'DocumentDir' of undefined

오류. 즉, 패키지(rn-fetch-blob)가 이제 정의되지 않았습니다.

편집하다:

실제로 단지 추가 transformIgnorePatterns: [], 내에 jest.config.js 형식 오류에 CHAGE에 구문 에러가 발생합니다.

@schhumannd 죄송합니다 제가 실수를 저질렀습니다. 링크가 현재 페이지로 리디렉션 중입니다. 링크에 제공된 구성으로 "jest.config.js"를 설정하면 작동합니다.
오류가 링크의 예제와 같은 모의 파일을 추가하거나 이 구성으로 "identity-obj-proxy"를 설치하여 .css 파일을 가져오는 것과 관련된 경우 작동해야 합니다.

npm install --save-dev identity-obj-proxy

jest.config.js(CSS 모듈용):

{ "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|less)$": "identity-obj-proxy" } } }

또한 이것은 프로젝트의 루트 디렉터리에 있는 내 .babelrc 파일입니다( test.config.js도 루트에 있어야 함).

먼저 babel을 사용하려면 "babel-jest" 및 "regenerator-runtime"을 설치하십시오.

npm --dev babel-jest babel-core regenerator-runtime

그런 다음 이 구성을 .babelrc 파일에 추가합니다.

{ "presets": ["env", "react"], "plugins": ["transform-class-properties"], "env": { "production": { "plugins": ["transform-es2015-modules-commonjs"] }, "test": { "presets": ["env", "react"], "plugins": ["transform-export-extensions"], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } } }

도움이 되었기를 바랍니다.
https://jestjs.io/docs/en/webpack.html

제 경우에는 다음 .babelrc 추가한 후 작동합니다.

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

그런 다음 NODE_ENV=test jest 사용하여 테스트를 실행합니다.

이것은 일부 사람들에게만 도움이 될 것입니다.

내 문제는 농담이 내 JS 파일을 구문 분석할 수 없기 때문입니다. 대신 require 사용했습니다.

얘들 아. babelrc 파일이 없기 때문에 이러한 솔루션 중 어느 것도 작동하지 않습니다. babel.config.js만 있습니다. babel.config.js로 어떻게 수정합니까? 감사 해요

babel 구성에 대한 위의 토론과 다른 검색의 몇 가지 추가 옵션(예: esm 옵션)에서 많은 것을 시도했지만 아무 것도 작동하지 않았습니다. import 키워드가 계속해서 jest에서 오류를 제공했습니다. es6 가져오기로 모듈을 테스트하는 것이 너무 어렵다는 것은 슬픈 일입니다.

마지막으로 이것이 나를 위해 일한 것입니다 : ts-jest

이제 나는 내 코드에서 어떤 typescript도 사용하지 않지만 ts-jest 모두 동일하게 사용했습니다(typescript는 내부적으로 가져오기 및 기타 모든 것을 지원하기 때문에). 이것은 단지 농담이 자바스크립트 코드를 올바르게 이해하도록 하기 위한 것입니다.

다음 단계를 수행했습니다.
npm i -D jest typescript ts-jest @types/jest
jest.config.js 파일에서:
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest는 js 파일이 컴파일되는 것을 허용하지 않는 typescript에 대해 불평할 수 있습니다. 아래 옵션을 사용하여 tsconfig.json 파일을 추가합니다.
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
모든 babel 관련 구성 및 파일을 제거했습니다. npm 구성은 다음과 같습니다.
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
수입품과 관련하여 비슷한 문제에 직면한 사람에게 도움이 되길 바랍니다.

누구든지 JS 가져 오기를 사용하여 작동하는 설정이있는 베어 본 리포지토리를 가지고 있습니까?

누구든지 JS 가져 오기를 사용하여 작동하는 설정이있는 베어 본 리포지토리를 가지고 있습니까?

https://github.com/kasvtv/react-starter

원래 토론과 관련이 없을 가능성이 있는 유사한 문제를 검색하는 동안 이 페이지를 찾은 사람으로서. 내 문제는 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports에 설명된 기능과 같은 동적 가져오기를 사용하기 때문에 발생했습니다 https://github.com/airbnb/babel-plugin-dynamic-import-node 에서 사용할 수 있는 이 기능에 대한 babel 플러그인을 추가하고 그에 따라 .babelrc를 수정하여 해결되었습니다.

{
    ...
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    ...
}

난 그냥 옵션을 제거 :{ module:false }, 그리고 그것은 작동합니다

"presets": [
    ["@babel/env", {module: false} ],  
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]

jest config에 transformIgnorePatterns: [] 를 추가하고 babelrc에 transform-es2015-modules-commonjs 를 추가하면 문제가 해결되었습니다.
농담: ^23.1.0,
바벨: 6.26.3

@ngmgit 그러나 이것은 모든 node_modules를 트랜스파일한다는 것을 의미합니다. 이는 매우 최적이 아닙니다...

나의 경우에는,
.babelrc 작동하지 않습니다하지만 난에 동일한 설정을 이동하여 문제를 해결 .babelrc 에 babel.config.js .

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

여기에 있는 모든 것은 나에게 효과가 없습니다. 나는 React 애플리케이션을 테스트하기 위한 페이스북의 공식 테스트 라이브러리가 그 정도로 구성하기 어렵다는 것을 믿을 수 없습니다. 저는 8년 이상의 경험을 가진 개발자이고 많은 문제와 질문을 통해 성공하지 못한 채 하루 중 5시간을 보냈습니다. 스택 오버플로에.

jest + react-testing-library와 함께 작동하도록 반응 응용 프로그램을 구성할 수 없습니다.

이것은 단지 jest가 처리할 수 없는 새로운 구문 오류를 나에게 매번 고함을 지르기 때문입니다. 내가 사용하는 모든 플러그인은 하나의 문제를 해결하고 다른 하나를 제공합니다. babel이 모든 것을 처리하도록 하는 방법이 있습니까?

나는 정말로 포기한 것을 진심으로 끝내고 더 이상 시간을 보내지 않을 것입니다. 아마도 프로젝트에 이 라이브러리를 추가하는 것을 취소할 것입니다.

진지하게, jest + react-testing-library를 사용하여 반응 응용 프로그램을 테스트하려는 사람을 위한 기본 구성이 없다는 것을 보는 것은 매우 이상합니다.

많은 SO 답변 및 github 문제로 몇 시간 동안 시행 착오를 겪은 후 @cpojer 의 답변이 저에게

나를 도운 몇 가지 추가 컨텍스트로 최신 및 가장 큰 업데이트:

babel.config.js

module.exports = {
  "env": {
    "production": {
-      "plugins": ["transform-es2015-modules-commonjs"]
# new kid on the block
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

jest.config.js

module.exports = {
  // if you're also using typescript
  preset: "ts-jest",
  testEnvironment: "node",
  verbose: true,
  // registers babel.config.js with jest
  transform: {
    "^.+\\.js$": "babel-jest",
  },
  // explicitly include any node libs using ESM modules
  transformIgnorePatterns: ["node_modules/?!(<ESM module here>|<another here>|<etc...>)"],
}

종속성:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (타이프스크립트용)

이 문제는 프로젝트의 루트 디렉터리에서 jest를 실행하지 않을 때도 발생할 수 있습니다...

react-native 또는 jest-expo 사전 설정을 사용 중이고 프로젝트에 .js 파일이 있는 경우 jest 구성에서 일치하도록 transform 를 설정해야 합니다.
https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer--pathtotransformer-object의 표현식을 사용했는데 작동했습니다.

transform: { '^.+\\.[jt]sx?$': 'babel-jest' }

pnpm 지원

pnpm 사용자를 위해 여기에 메모를 남기고 싶습니다....

다음 예제는 pnpm 경로가 다르기 때문에 pnpm 사용자에게는 작동하지 않습니다. 위의 정규식은 병합된 node_modules 디렉토리에서만 작동합니다.

/xxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/input/String

참조: https://regexr.com/5cs2h

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns - 맞춤화

고치다

.* 를 추가 하여 마지막 발생에 대해 부정적인 예측을 사용합니다.

node_modules/(?!(.*antd/es)/)