[React]Jest语法错误:意外的令牌import

5
我一直在苦苦挣扎,但是我无法弄清楚如何让这个工作起来。关于这个问题似乎有很多的问题,我尝试了所有的方法,但是我仍然似乎在运行jest时遇到了问题,import似乎根本不起作用。所以请问有人能协助我解决这个问题吗?
错误
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"
          ]
}

我尝试添加了 "env": {"test": {"plugins": ["transform-es2015-modules-commonjs"]}} ,但它没有起作用,所以我暂时将其删除了。 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"
  }
}

JavaScript世界变化迅速。使用正确配置的webpack 4和babel,您不需要使用babel-core或babel-jest。只需在babelrc中使用预设envreactstage-0即可。如果在根级别上使用modules: false,则需要在测试环境中使用modules: true。意外的令牌导入通常意味着babel没有将其转换为commonJs模块以供jest/node消耗。 - Joel Quiles
1个回答

5

您需要告诉 Jest 使用 Babel 导入您的文件。 这可以通过在 package.json 中设置 jesttransform 属性来完成:

"jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
}

是的,谢谢!这使得导入变得容易了,但是当我尝试使用import { Home} from '../src/Home';导入我的脚本时,出现了SyntaxError: Unexpected token :的错误。 - Eric
({"Object<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){:global .react-datepicker__tether-element-attached-top .react-datepicker__triangle, :global .react-datepicker__tether-element-attached-bottom .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow, :global .react-datepicker__month-read-view--down-arrow - Eric
似乎出现了与react.datepicker有关的问题。 - Eric
听起来你正在导入你的样式。你可以在package.json文件中的jest部分添加以下内容:"moduleNameMapper": { "\.(s?css|less)$": "identity-obj-proxy" } - zer0chain
我认为你现在遇到的错误与这篇文章最初提到的错误无关。你能展示一下产生错误的代码片段吗? - zer0chain
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接