jest: 테스트 스위트를 실행하지 못했습니다. SyntaxError:예기치 않은 토큰 Import

jest: 테스트 스위트를 실행하지 못했습니다. SyntaxError:예기치 않은 토큰 Import

이것은 패키지의 농담 설정입니다.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"
      ]
    }
  }
}

joke getting started 페이지에서 찾은 문서에 따르면 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 변수를 설정하기 때문에 .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"]
    }
  }
}

매년 사전 설정은 해당 연도에 비준된 것만 컴파일합니다.babel-preset-env는 대체됩니다.es2015,es2016,es2017,latest

이를 바탕으로 최신 구성에서는 플러그인/프리셋을 사용하거나 교환해야 합니다.es2015및 임의의esX새로운 것에 대해서:env.

1. 를 인스톨 할 필요가 있습니다.babel-preset-env와 함께npm install.
2. 고객님의 고객명.babelrc이에 따라 업데이트해야 합니다.

{
  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...
}

Babel 플러그인에 대한 자세한 내용은 공식 문서를 참조하십시오.

☝138 어레이의 플러그인/케이블 순서가 중요합니다.

제 경우, 다음과 같은 일이 있었습니다..babelrc설정:

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]
}

그럼에도 불구하고.babel-env에러가 아직 발생했다고 명시되어 있습니다.그것을 고치기 위해 나는 "모듈" 즉 false flag를 제거해야 했다.

Jeest는 Import를 처리하지 않기 때문에 변환 플러그인이 필요합니다.이 때문에 플러그인을 추가해야 했습니다.

babel-syslog-dynamic-import 노드

그리고 babel 설정을 업데이트하여 이 플러그인을 사용하여 코드를 올바르게 변환하기 위해 joke를 전달합니다.

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

GitHub 스레드

babel-jest를 설치해야 합니다.저도 같은 문제가 있었어요.

앱 디렉토리로 이동하여 warn add babel-jest

행운을 빕니다.

다음 .babelrc는 추가하지 않고 사용할 수 있습니다.

{
  "presets": [["env", {
    "debug": false,
    "modules": false
  }],  "es2015", "stage-0", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "dynamic-import-node",
    "transform-class-properties",
    "transform-decorators-legacy"
  ]
}

패키지의 "devDependencies" 섹션.json은 다음과 같습니다.

...
"devDependencies": {
  "babel-cli": "latest",
  "babel-core": "^6.26.3",
  "babel-eslint": "^8.2.3",
  "babel-jest": "^22.4.4",
  "babel-loader": "latest",
  "babel-plugin-dynamic-import-node": "^1.2.0",
  "babel-plugin-lodash": "latest",
  "babel-plugin-syntax-dynamic-import": "^6.18.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "latest",
  "babel-plugin-transform-dynamic-import": "^2.0.0",
  "babel-plugin-transform-flow-strip-types": "^6.22.0",
  "babel-plugin-transform-object-rest-spread": "latest",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",
  "babel-preset-react-app-babel-7": "^4.0.1",
  "babel-preset-stage-0": "^6.24.1",
 ...

언급URL : https://stackoverflow.com/questions/41725796/jest-test-suite-failed-to-run-syntaxerror-unexpected-token-import