React 组件上的 Jest 测试：意外标记“<”

Question

尝试设置 Jest 来测试我的 React 组件（从技术上讲，我正在使用 Preact）但同样的想法......

每当我尝试获取覆盖率报告时，当它遇到任何 jsx 语法时都会出错。

错误

Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)

  50 |
  51 | render(
> 52 |   <Gallery images={images} />,
     |   ^

我试过遵循文档和类似的问题，但没有运气！似乎 Jest 没有使用我的 babel 设置。

知道如何摆脱错误吗？

包.json

Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)

  50 |
  51 | render(
> 52 |   <Gallery images={images} />,
     |   ^

.babelrc

{
  "name": "tests",
  "version": "1.0.0",
  "description": "",
  "main": "Gallery.js",
  "scripts": {
    "test": "jest --coverage",
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-proposal-export-default-from": "^7.5.2",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.10.0",
    "jest": "^24.8.0",
    "jest-cli": "^24.8.0",
    "parcel-bundler": "^1.12.3",
    "react-test-renderer": "^16.8.6"
  },
  "dependencies": {
    "preact": "^8.4.2"
  },
  "jest": {
    "verbose": true,
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
    },
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/node_modules/**"
    ]
  }
}

编辑

我的组件被加载到我的index.js文件中，如下所示：

索引.js

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      },
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "regenerator": true
    }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "babel-plugin-transform-export-extensions"
  ]
}

Gallery.js

import { h, render } from 'preact';
import Gallery from './Gallery'
import "./gallery.css"


const images = [ ... /* Some object in here */ ];

render(
  <Gallery images={images} />,
  document.getElementById('test'),
);

Answer 1

有同样的问题。重命名.babelrc来babel.config.js为我工作。

样品babel.config.js-

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"],
};

Answer 2

这里的问题在于 Babel 编译 Preact 的方式。我必须添加@babel/plugin-transform-react-jsx插件才能让我的 Jest 测试正常工作。

事实证明，该部分的Preact 文档Global pragma中对此有模糊的记录。

解决方案

1.安装插件

npm i @babel/plugin-transform-react-jsx --save-dev

2. 更新.babelrc

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      },
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
        "regenerator": true
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    ["@babel/plugin-transform-react-jsx", { "pragma":"h" }]
  ]
}