运行 Jest 测试时遇到问题：`SyntaxError: Unexpected token <`答案

【问题标题】：Having trouble running Jest tests: `SyntaxError: Unexpected token <`运行 Jest 测试时遇到问题：`SyntaxError: Unexpected token <`
【发布时间】：2017-12-28 01:06:04
【问题描述】：

我知道这可能以前已经发布过，但我真的很困惑为什么我的测试在我的 React 项目中不起作用。这是我的.babelrc 文件：

{
    "presets": ["react", "es2015", "stage-0"],

    "plugins": [
        "transform-runtime",
        "add-module-exports",
        "transform-decorators-legacy"
    ],

    "env": {
        "development": {
            "plugins": [
                "typecheck",
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-catch-errors",
                        "imports": ["react", "redbox-react"]
                    }]
                }]
            ]
        },
        "test": {
            "presets": ["es2015", "react", "stage-0"],
            "plugins": [
                "transform-runtime",
                "add-module-exports",
                "transform-decorators-legacy"
            ]
        }
    }
}

这是我在 package.json 中的 Jest 设置

  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json"
    ],
    "moduleNameMapper": {
      "ExampleTest": "<rootDir>/app/pages/ExampleTest.js"
    },
    "moduleDirectories": [
      "app",
      "node_modules"
    ]
  },

我得到的错误是Test suite failed to run... SyntaxError: Unexpected token <。

据我所知，它试图运行的文件中包含 JSX/ES6 代码……它不知道如何转换它？这很奇怪，因为我已经在 .babelrc 中告诉它这样做。我还为 Jest 提供了适当的 moduleDirectories。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs testing babeljs jestjs

【解决方案1】：

确保在测试文件中导入React。

【讨论】：

我已经在测试文件的顶部这样做了。 import React from 'react'

【解决方案2】：

如果您的 package.json 文件只包含框中显示的内容，我认为问题在于“}”，因为您包含了一个昏迷，而它不应该存在（如果 package.json 文件只包含框中显示的内容），因为它是最后一行代码，并且后面没有更多的 JSON 代码。希望有用！

【讨论】：

【解决方案3】：

您的 JSON 中的最后一个逗号是错误的。它应该看起来像：

{"root":{
    "presets": ["react", "es2015", "stage-0"],

    "plugins": [
        "transform-runtime",
        "add-module-exports",
        "transform-decorators-legacy"
    ],

    "env": {
        "development": {
            "plugins": [
                "typecheck",
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-catch-errors",
                        "imports": ["react", "redbox-react"]
                    }]
                }]
            ]
        },
        "test": {
            "presets": ["es2015", "react", "stage-0"],
            "plugins": [
                "transform-runtime",
                "add-module-exports",
                "transform-decorators-legacy"
            ]
        }
    }
}}

【讨论】：

【解决方案4】：

如果有人好奇的话，答案是配置 Jest 以优雅地处理资产文件，例如样式表和图像。通常，这些文件在测试中并不是特别有用，因此我们可以安全地模拟它们。要了解更多信息，请参阅 Jest 文档中的 Using with Webpack。

【讨论】：