Question

我一直在苦苦挣扎，我无法弄清楚如何使这项工作。似乎有很多关于这个问题的问题，我尝试了其中的每一个，我似乎仍然遇到运行开玩笑的问题。导入似乎根本不起作用。所以，任何人都可以帮助我解决这个问题。

错误

C:\Users\admin\Documents\my-app\_tests_\main.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at process._tickCallback (internal/process/next_tick.js:109:7)

main.spec.js

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { Home } from '../src/Home';

test('Basic Test', () => {
  expect(2 + 2).toBe(4);
});

运行此命令会产生错误，但如果我注释掉导入行，则会有效。

bablerc

{
    "plugins": [
            "transform-async-functions",
            "transform-object-rest-spread",
            "transform-regenerator"
          ],
     "presets": [
            "es2015",
            "react"
          ]
}

我试图添加＆＃34; env＆＃34;：{＆＃34; test＆＃34;：{＆＃34; plugins＆＃34;：[＆＃34; transform-es2015- modules-commonjs＆＃34;]}}但它没有做任何事情，所以我现在把它拿出来。

的package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "app",
  "scripts": {
    "start": "node server.js",
    "postinstall": "webpack -p --define process.env.NODE_ENV=\"'production'\" --define process.env.SERVER_ROOT=\"'${SERVER_ROOT}'\"",
    "start-dev": "webpack-dev-server",
    "test": "jest"
  },
  "engines": {
    "node": "6.11.1",
    "npm": "3.10.8"
  },
  "jest": {
    "transform": {
       "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": { "\\.(s?css|less)$": "identity-obj-proxy" }
  },
  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-async-functions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-regenerator": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.4",
    "file-loader": "^0.11.1",
    "image-webpack-loader": "^3.3.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-table": "^3.3.3",
    "react-datepicker": "^0.46.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.3",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-persist": "^4.6.0",
    "redux-thunk": "^2.2.0",
    "sails.io.js": "^1.1.10",
    "socket.io-client": "1.6.0",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.2",
    "babel-jest": "^20.0.3",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^2.9.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-babel": "^4.1.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "jest": "^20.0.4",
    "react-test-renderer": "^15.6.1",
    "webpack-dev-server": "^2.4.2",
    "whatwg-fetch": "^2.0.3"
  }
}

Answer 1

你需要告诉jest使用Babel导入你的文件。可以通过在transform中设置jest的{{1}}属性来完成此操作：

package.json

[React] Jest SyntaxError：意外的令牌导入

1 个答案: