在 Jest 管理的 TypeScript 测试代码中加载“@svgdotjs/svg.js”(3.0.11) 时遇到问题

Question

我在 TypeScript 项目中一直收到错误 "Cannot find module '@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 并重新安装。我尝试了 repo 的新克隆并安装。

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

Answer 1

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

Answer 2

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

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

我觉得应该是

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

如果我更改它并重建它，我就可以加载它。 d.ts文件中还有错误，但至少你可以开始了。

在 Jest 管理的 TypeScript 测试代码中加载“@svgdotjs/svg.js”(3.0.11) 时遇到问题

Trouble loading "@svgdotjs/svg.js" (3.0.11) in TypeScript test code managed by Jest

javascript

typescript

svg.js

jestjs

es6-modules