SyntaxError：使用 jest 和 parcel 时出现意外的标记“<”答案

【问题标题】：SyntaxError: Unexpected token '<' when using jest and parcelSyntaxError：使用 jest 和 parcel 时出现意外的标记“<”
【发布时间】：2020-09-23 04:51:32
【问题描述】：

我使用包裹进行捆绑，开玩笑说下面这行有问题：

import html from "./treeComponent.html"
^
SyntaxError: Unexpected token '<'

因为html文件有

<link rel="stylesheet" href="treeComponent.css" />

如果我只有一个或一个包含“

这是我的 jest.config：

module.exports = {
    roots: [
        "source"
    ],
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    verbose: false,
    collectCoverage: false
};

我的.babelrc

{
  "presets": ["@babel/preset-env"]
}

我的 package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "build": "parcel watch source/* --no-hmr --out-dir ../wwwroot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@types/jest": "^25.2.3",
    "babel-jest": "^26.0.1",
    "jest": "^26.0.1",
    "parcel-bundler": "^1.12.4",
    "ts-jest": "^26.1.0",
    "typescript": "^3.9.3"
  },
  "dependencies": {
    "@microsoft/signalr": "^3.1.4"
  },
  "browserslist": [
    "since 2017-06"
  ]
}

我不使用任何框架，例如 angular 或 react。

【问题讨论】：

标签： typescript jestjs parcel babel-jest

【解决方案1】：

我遇到了同样的问题。我用 jests moduleNameMapper 配置修复了它。（在jest.config.js）

moduleNameMapper: {
  "\\.png$": "<rootDir>/tests/assets/empty_string.js",
  "my_specific_html_asset\\.html$": "<rootDir>/tests/assets/my_specific_html_asset.js",
  "\\.html$": "<rootDir>/tests/assets/html_generic_div.js"
},

empty_string.js 包含：

export default '';

my_specific_html_asset.js 包含：

export default '<div id="my_specific_id" class="my_specific_class"></div>';

html_generic_div.js 包含：

export default '<div></div>';

在文档中，他们提到了GlobalImageStub，但我无法让它工作，因此我使用了空字符串解决方案。

【讨论】：