通过 jest 运行测试，我在包含的 .jsx 文件中得到了“Unexpected token”

Posted 2023-02-22

【中文标题】通过 jest 运行测试，我在包含的 .jsx 文件中得到了“Unexpected token”

【英文标题】：Running test via jest, I get `Unexpected token` in included .jsx files

【发布时间】：2016-04-13 12:46:14

【问题描述】：

我正在使用 jest 和 Babel 6 并尝试运行包含 .jsx 文件的测试。由于某种原因，该文件没有被提取为 .jsx 并且似乎被视为纯 js，从而导致具有 React 组件的行出现错误。

这是测试：

var searchPath = '../../../../../app/assets/javascripts/components/navigation/search_icon.js.jsx';
jest.dontMock(searchPath);

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils'

const SearchIcon = require(searchPath);

describe('components', () => 
  describe('SearchIcon', () => 
    it('Should dispatch an action to toggle the search bar when clicked', () => 

      var icon = TestUtils.renderIntoDocument(
        <SearchIcon labelOn="On" labelOff="Off"/>
      );

      // Smoke test - I can't even get this far :(
      expect(true).to.eq(true)

    )
  )
);

我的 package.json 在这里：

  "name": "fd-v5-web",
  "version": "1.0.0",
  "description": "Farmdrop mobile site",
  "dependencies": 
    "babel-preset-es2015": "^6.0",
    "babel-preset-stage-0": "^6.0",
    "babel-preset-react": "^6.0",
    "babelify": "~>7.2",
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "classnames": "~>2.1",
    "immutable": "^3.7.5",
    "lodash": "~3.9.3",
    "moment": "~2.10.3",
    "react": "^0.14.3",
    "react-redux": "^4.0.0",
    "react-dom": "^0.14.6",
    "react-tools": "^0.13.1"
  ,
  "engines": 
    "node": "4.0.0",
    "npm": "2.1.x"
  ,
  "devDependencies": 
    "babel-jest": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "^0.14.3"
  ,
  "scripts": 
    "test": "BABEL_JEST_STAGE=0 jest"
  ,
  "jest": 
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ],
    "testFileExtensions": [
      "js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "es6"
    ]
  

我正在使用npm test在命令行上运行

我的.babelrc 看起来像这样：

  "presets": [
     "react",
     "es2015"
  ]

【问题讨论】：

searchPath = '../../../../../app 哎哟;)

是的，我知道 :( 这是一个 Rails 项目，所以有很多嵌套。有没有通用的方法来解决这个问题？我对 JS 测试还不太熟悉。Rails 有一个时髦的自动加载机制，会自动找到文件，所以在我的测试中通常不需要。

@MattGibson 我曾经使用过这个。 github.com/classflow/import-alias

【参考方案1】：

修复它。我的.babelrc 在错误的文件夹中。它应该在根目录中。当我把它移到那里时，一切正常。

  "presets": [
     "react",
     "es2015"
  ]

【讨论】：

用户还可以在 package.json 中添加如下 sn-p："babel": "presets": [ "react", "es2015" ] ，对于喜欢 package.json 中所有内容的用户

非常感谢... .和更多字符

对于那些使用更新代码的人，上面现在应该是“预设”：[“@babel/preset-react”，“@babel/preset-env”]

【参考方案2】：

在@connect 中使用时，Jest 可能会抛出Unexpected token 的另一个地方是@（在大多数教程中都会遇到）。在你的 package.json 文件中附加 babel-plugin-transform-decorators-legacy，运行 npm install 并确保你的 .babelrc 文件中有 "presets": ["es2015", "react", "stage-0"] 和 "plugins": ["transform-decorators-legacy"] 行。

【参考方案3】：

另一个值得关注的地方是任何 transform 配置。例如，可能有 JSX 转换应用于一些但不是所有的源。