时间戳

首页 > 解决方案 > Preact + Jest：“moduleNameMapper”和“moduleDirectories”配置未注册

reactjs - Preact + Jest：“moduleNameMapper”和“moduleDirectories”配置未注册

问题描述

我正在尝试使用 Preact、Parcel、Typescript 和 Jest 建立一个项目。package.json为了对我的导入使用绝对路径，我有以下内容：

"alias": {
  "src": "./src"
},

这让我可以导入我的文件，import sum from 'src/math/sum';而不是例如import sum from '../../../math/sum';. 这一切在实际构建和运行页面时都有效，但是在使用 Jest 运行测试时，我收到一个错误：Cannot find module 'src/math/sum' or its corresponding type declarations.仔细阅读其他 stackoverflow 问题后，我尝试使用“moduleDirectories”和“moduleNameMapper”Jest 配置字段来使别名工作开玩笑，但错误从未改变。

这是我的 Jest 配置（在 package.json 中）：

"jest": {
    "clearMocks": true,
    "coverageDirectory": "coverage",
    "moduleDirectories": ["node_modules", "./"],
    "moduleNameMapper": {
        "^src[/](.+)": "<rootDir>/src/$1",
        "src/([^\\.]*)$": "<rootDir>/src/$1"
    },
    "testEnvironment": "node",
    "transform": {
        "^.+\\.tsx?$": "ts-jest"
    }
},

这是我的 tsconfig.js：

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "target": "es6",
        "jsx": "react",
        "jsxFactory": "h"                                      
    },
    "include": ["./src/**/*"]
}

这是我的软件包版本：

"dependencies": {
    "preact": "^10.4.4",
    "preact-router": "^3.2.1",
    "typescript": "^3.9.3"
},
"devDependencies": {
    "@types/jest": "^25.2.3",
    "jest": "^26.0.1",
    "parcel-bundler": "^1.12.4",
    "ts-jest": "^26.0.0"
}

标签： reactjstypescriptjestjsparceljspreact

解决方案

我在为 Parcel 和 Jest 配置的正确路径上，缺少的部分是在 tsconfig.json 中为 Typescript 配置绝对路径。

现在，使用绝对路径，我的配置是：

package.json（用于 Parcel 和 Jest 配置）

{
...
  "alias": {
    "src": "./src"
  },
  "jest": {
    "moduleNameMapper": {
      "^src/(.*)$": "<rootDir>/src/$1"
    },
    "preset": "ts-jest"
  },
...
}

tsconfig.json（baseUrl 和路径是解决我的问题的两个字段）

{
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "src/*": ["./src/*"]
        }
    },
    "include": ["./src/**/*"]
}

现在我可以像这样导入我的 TS 文件，假设我的 src 目录中有一个名为“sum.ts”的文件：import sum from 'src/sum';

推荐阅读