相关疑难解决方法(0)

我刚刚开始使用Jest测试框架,虽然直接单元测试工作正常,但我在测试其模块中的任何组件(通过babel + webpack的ES模块)需要HTML文件时遇到大量问题.

这是一个例子:

import './errorHandler.scss';
import template from './errorHandler.tmpl';

class ErrorHandler {
    ...

我正在加载我在Jest的package.json配置中设置的组件特定SCSS文件以返回一个空对象但是当Jest尝试运行该import template from './errorHandler.tmpl';行时它会断开说:

/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
                                                                                         ^
    SyntaxError: Unexpected token <

        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

我的Jest配置package.json如下:

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
    "moduleDirectories": ["node_modules"],
    "moduleFileExtensions": ["js", "json", "html", "scss"],
    "moduleNameMapper": {
        "^.+\\.scss$": "<rootDir>/test/styleMock.js"
    }
}

似乎webpack html-loader与Jest无法正常工作,但我找不到任何有关如何解决此问题的解决方案.

有谁知道如何html-loader import在我的测试中使这些工作？他们加载我的lodash模板标记,我宁愿不在我的.js文件中有这些大量的HTML块,所以我可以省略该import template from x部分.

PS:这不是一个反应项目,只是简单的webpack,babel,es6.

我有一个带有单文件组件的 vue 应用程序，我想添加单元测试来测试组件。我尝试使用此处描述的笑话，但我不断收到错误“笑话遇到意外令牌”，并包含以下详细信息：

/some_path/MyRecipe.vue:1
<template>
^

SyntaxError: Unexpected token <

  1 | import { shallowMount } from "@vue/test-utils"
> 2 | import MyRecipe from "../src/components/MyRecipe.vue"
    | ^
  3 | 
  4 | describe('MyRecipe', () => {
  5 |   test('is a Vue instance', () => {

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
  at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)

经过一些研究（例如，来自此处），我认为这可能是因为需要 .js 文件，但 .vue 单文件组件中包含 html、javascript 和 css，通常由 webpack 和 vue-loader 处理。我尝试遵循各种教程中的 jest 配置，使 jest 使用 vue-jest 来转换 .vue 文件，但错误仍然存​​在。这是我的 package.json 文件（删除了不必要的部分）：

{
  "name": "all-recipes ", …