在 Jest 管理的 TypeScript 测试代码中加载“@svgdotjs/svg.js”（3.0.11）时出现问题答案

【问题标题】：Trouble loading "@svgdotjs/svg.js" (3.0.11) in TypeScript test code managed by Jest在 Jest 管理的 TypeScript 测试代码中加载“@svgdotjs/svg.js”（3.0.11）时出现问题
【发布时间】：2019-06-26 14:31:41
【问题描述】：

我一直在 TypeScript 项目中收到错误“找不到模块'@svgdotjs/svg.js'”，即使 VSCode 在node_modules 中看到该库也很好。也许我只是完全不了解模块是如何工作的！该库使用tsc 和tslint 构建良好。

我正在开发一个基于 JSON 输入呈现 SVG 的库。我正在尝试运行单元测试。我正在使用svgdom 来模拟必要的 DOM 容器。

缩写package.json：

"dependencies": {
    "@svgdotjs/svg.js": "github:svgdotjs/svg.js",
},
"devDependencies": {
    "chai": "^4.2.0",
    "jest": "^23.6.0",
    "svgdom": "0.0.18",
    "ts-jest": "^23.10.5",
    "ts-loader": "^5.3.3",
    "ts-node": "^8.0.2",
    "tslint": "^5.12.1",
    "typescript": "^3.3.1",
}

ls node_modules:

    Directory: D:\github\renderer\node_modules


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2019-02-01   6:01 PM                .bin
d-----       2019-02-01   6:00 PM                @babel
d-----       2019-02-01   6:00 PM                @svgdotjs

index.ts顶部：

import SVG from "@svgdotjs/svg.js";
import Ajv from "ajv";
import { renderers } from "./renderers";
import { APRenderRep } from "./schema";
import schema from "./schema.json";

index.test.js的相关部分：

import { render } from "../src/index";

test("debugging outputter", () => {
    const data = {};
    // As per the `svgdom` docs
    const window = require("svgdom");
    const {SVG, registerWindow} = require("@svgdotjs/svg.js");
    registerWindow(window, window.document);
    const canvas = SVG(document.documentElement);
    render(canvas, data);
    console.log(canvas.svg());
});

如果这些代码还不够，这里是tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2015",
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": true,
        "outDir": "build",
        "resolveJsonModule": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

和jest.config.js:

module.exports = {
    globals: {
        'ts-jest': {
            tsConfig: 'tsconfig.json'
        }
    },
    'coverageDirectory': undefined,
    'collectCoverage': false,
    'collectCoverageFrom': [
        '**/src/**/*.{ts,js}'
    ],
    moduleFileExtensions: [
        'ts',
        'js'
    ],
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest'
    },
    testMatch: [
        '**/test/**/*.test.(ts|js)'
    ],
    testEnvironment: 'node'
};

我希望渲染后的 SVG 会神奇地出现在控制台上。相反，我得到以下信息：

FAIL  test/index.test.ts
● Test suite failed to run

    Cannot find module '@svgdotjs/svg.js' from 'index.ts'

    > 1 | import SVG from "@svgdotjs/svg.js";
        | ^
    2 | import Ajv from "ajv";
    3 | import { renderers } from "./renderers";
    4 | import { APRenderRep } from "./schema";

    at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
    at Object.<anonymous> (src/index.ts:1:1)

我已尝试对 node_modules 进行 nuking 并重新安装。我尝试了一个新的 repo 克隆并安装。

实际的 repo 在这里：https://github.com/AbstractPlay/renderer。

【问题讨论】：

可能是打字稿在 svg.js 存储库中提取了 d.ts 文件吗？不幸的是，该文件对于版本 3 不是最新的。它不适合与 svg.js 的 esm 版本一起使用。它只有独立包的类型。我不习惯打字，因此不知道如何使用 d.ts 和 bundle 的 esm 版本
这一切都适用于版本 2 吗？我真的很想用 3 来完成这项工作，但从根本上说，我只是想让它发挥作用。
我不确定。版本 2 的 d.ts 文件有效。但是您必须自己从那里拿走它，因为我对 typescript 的了解不足以指导您
我将恢复到 svg.js 的 NPM 版本，看看是否可以让事情正常进行。我希望我有足够的知识来解决这个问题。我会做一些阅读。
您似乎混合了 import 语句和 require 语句。 import 应该选择 esm bundle，而 require 应该选择 node bundle。你应该决定一个

标签： javascript typescript jestjs es6-modules svg.js

【解决方案1】：

在我看来，@svgdotjs/svg.js 的 rollup.config.js 文件没有针对 3.0 进行更新。它有：

format: node ? 'cjs' : 'iife',

我认为应该是

format: node ? 'cjs' : 'umd',

如果我改变它并重建，我就可以加载它。 d.ts文件还是有错误的，但至少你可以上手了。

【讨论】：

【解决方案2】：

简而言之，截至目前 (v3.0.11)，svg.js 似乎根本无法以我使用的方式与 Typescript 一起使用。当我恢复到 NPM 版本（v2.7.1）时，一切都按预期工作。

【讨论】：