javascript - 无法在由Jest管理的TypeScript测试代码中加载“@ svgdotjs/svg.js”(3.0.11)

我一直在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)

我已尝试nuking node_modules并重新安装。我尝试了仓库的全新克隆并安装。

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

最佳答案

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

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

我认为应该是

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

如果更改并重建，则可以加载它。 d.ts文件中仍然存在错误，但至少您可以开始使用。

关于javascript - 无法在由Jest管理的TypeScript测试代码中加载“@ svgdotjs/svg.js”(3.0.11)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54489234/