logo标签列表

绝对路径（baseUrl）出现错误：找不到模块。

typescriptjestjscreate-react-appabsolute-path
177

我正在设置一个配置，以在create-react-app + typescript应用程序中运行我的测试（我已经弹出）。 我正在使用jest + enzyme。 在我的tsconfig.json中，我设置了baseUrl='./src'，因此当我导入模块时，我可以使用绝对路径。 例如，这是我文件中的典型导入语句：

import LayoutFlexBoxItem from 'framework/components/ui/LayoutFlexBoxItem';

您可以看到路径是绝对的（从/src文件夹），而不是相对的。 当我在调试模式下运行时（yarn start），这很好用。

但是当我运行我的测试（yarn test）时，我会收到以下错误：

 Cannot find module 'framework/components/Navigation' from 'index.tsx'

看起来jest无法解析这个绝对路径，尽管我已经在tsconfig.json中设置了它。这是我的tsconfig.json：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "baseUrl": "./src"    
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "config",    
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

现在我可以看到项目根目录下生成了一个tsconfig.test.json。这是用于测试的ts配置文件。以下是它的内容：
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

正如您所看到的，“module”在此处为commonjs，而在默认配置中为esnext。这可能是一个原因吗？

有人能够使用Jest和绝对路径对其TypeScript项目进行单元测试吗？还是这是一个已知的错误？由于我已经从默认配置中退出，是否有一些设置要放在我的webpack配置中？

感谢您的意见和建议。

21个回答
5

这是对我有效的方法：

npm i -D jest typescript
npm i -D ts-jest @types/jest
npx ts-jest config:init

然后，在 jest.config.js 中，这是我的设置

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  modulePaths: ["node_modules", "<rootDir>/src"],
};

在我的情况下，tsconfig.json 中没有任何路径（paths），但我已将 baseUrl 设置为 src

4
我使用React和Typescript，从npm测试中删除了react-scripts-ts test --env=jsdom，并将jest --watch添加为我的默认测试。之后，我按照这些说明https://basarat.gitbooks.io/typescript/docs/testing/jest.html向我的项目添加了jest.config.js文件，并使用@Antonie Laffargue提到的配置（添加/编辑属性moduleDirectories: ['node_modules', 'src']），它完美地工作了。
4

我曾经遇到类似的问题，希望这个翻译可以帮助你们节省时间。

我的问题：

  • 使用typescript和create-react-app
  • 在组件中（例如App.tsx）使用绝对路径（src/MyComp）导入其他组件
  • 编译、运行和构建时一切正常
  • 测试时出现错误

后来我发现这个错误是由NODE_PATH值不同造成的。所以我在测试时设置了它。

我在这里重新创建了这个问题和解决方案：https://github.com/alessandrodeste/...

我不确定这是否会对测试产生副作用。如果你有反馈，请告诉我；）

3
1
谢谢您的回答。我尝试使用moduleNameMapper，像这样：moduleNameMapper: { ".": "./src" }但现在我的测试卡住了，并显示以下信息：正在确定要运行的测试套件...看起来当我映射路径时，moduleNameMapper被使用。但在我的情况下，我没有映射任何路径。我只是指定了一个baseUrl。 - TheSoul
3
我也遇到了同样的问题，有人找到解决方法了吗？我尝试了"moduleDirectories": ["src"]，但它没有起作用。 - harry
这里有很多尝试，但我通过moduleNameMapper找到了解决方案。 - C0ZEN
这个对我起作用 '^src/(.*)': '<rootDir>/src/$1'。 - alayor
3
如果在monorepo中遇到此问题，以下是为我解决问题的方法：
在jest.config.js文件中进行以下操作：
roots: ["<rootDir>packages"],
moduleNameMapper: {
  '@monopre/(.+)$': '<rootDir>packages/$1/src',
},

假设您在tsconfig.json中具有以下内容：

"paths": {
  "@monopre/*": ["packages/*/src"],
}
3

在我的jest配置中添加以下内容，位于package.json中，解决了这个问题。

 "moduleDirectories": [
  "node_modules",
  "src"
]
2

在我的情况下，这对我起作用：

我在tsconfig.json中定义了我的路径：

"paths": { "@example/*": ["src/example/*"] }

在此之后，当运行测试时，jest 无法导入这些模块。

您必须在您的 jest.config.json 文件中添加 moduleNameMapper：

"moduleNameMapper": {"^@example/(.*)$": [
        "<rootDir>/example/$1"
],}

这是我必须遵循的方式。

1
使用 Svelte Kit，我的解决方案是：
import { readFileSync } from 'fs';
import pkg from 'ts-jest/utils/index.js';
const { pathsToModuleNameMapper } = pkg;

const { compilerOptions } = JSON.parse(readFileSync('./tsconfig.json'))

export default {
    preset: 'ts-jest',
    testEnvironment: 'node',
    testMatch: ['<rootDir>/**/*.test.ts'],
    testPathIgnorePatterns: ['/node_modules/'],
    coverageDirectory: './coverage',
    coveragePathIgnorePatterns: ['node_modules'],
    globals: { 'ts-jest': { diagnostics: false } },
    transform: {},
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
}
0

我在使用StitchesJS时遇到了同样的问题，模块找不到，解决方法是将以下内容添加到我的jest.config.js文件中

  moduleNameMapper: {
"stitches.config": "<rootDir>/node_modules/@stitches/react/dist/index.cjs"}

您可以根据您想要的模块进行适应。

0

这是一个有点老的线程，但最近，在jest.config.js上添加路径的其他建议之外，还要在tsconfig.json中添加"moduleNameMapper":和"paths":，我还必须包含我的测试文件夹，以便编译器能够识别它。

因此，在tsconfig.json中添加：

...
"include": ["src", "__tests__"],
...

希望这对正在谷歌搜索此内容的人有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接