配置 Jest 以模仿 webpack 解析根目录和解析别名答案

【问题标题】：Configuring Jest to mimic webpack resolve root and resolve alias配置 Jest 以模仿 webpack 解析根目录和解析别名
【发布时间】：2016-01-16 09:44:22
【问题描述】：

我正在使用 Webpack & Jest 建立一个项目。目前，Webpack 解析配置会导致 Jest 测试变得复杂。在我的 webpack 配置中，我设置了以下选项：

  resolve: {
    root: [__dirname + "/src/" ],
    extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.svg']
  }

这让我需要以下资产和模块：

import UnknownImg from 'assets/unknown';

以上内容实际上存在（相对于我的项目根目录）src/assets/unknown.svg。

但是，当我对具有上述行的文件运行测试时，在解析所需模块/资产的路径时会出错。

Error: /Users/byronsm/dev/nerve-center/src/components/organisms/system_status.jsx: Cannot find module 'assets/unknown' from '/Users/byronsm/dev/nerve-center/src/components/organisms'

在这种情况下，它似乎正在对导入的模块路径进行相对查找。有没有办法让 Jest 表现得和 Webpack 一样？

【问题讨论】：

标签： webpack jestjs

【解决方案1】：

官方 jest 文档中现在提供了解决方案。见Webpack Tutorial。

简而言之，将modulePaths 选项添加到package.json 的笑话配置中：

"jest": {
    "modulePaths": ["src"], 
    ...
}

【讨论】：

链接好像坏了。我认为这就是您所指的：facebook.github.io/jest/docs/en/…
@clu，我已经更新了答案中的链接——希望它能通过同行评审??
谢谢@jolyonruss

【解决方案2】：

您可以使用 Jest 20+ resolver option 并将其插入 jest-webpack-resolver

这个包似乎并不成熟（几天前），但对我来说可以。此外，截至目前，它要求 Jest 配置位于单独的 jest.config.js 文件中或通过 CLI 提供（不支持 package.json）。

【讨论】：

【解决方案3】：

经过一夜好眠后，我再次查看了这个，意识到这不是 Jest 配置，而是节点。在 webpack 中模拟 resolve.root 配置行为的最佳方法是在运行 jest 时将环境变量 NODE_PATH 设置为同一目录：

NODE_PATH=src jest

这并没有真正解决多个目录的问题，而是解决了我的问题。这篇文章帮助我更好地理解了解决方案https://gist.github.com/branneman/8048520。

【讨论】：

【解决方案4】：

Jestpack 旨在通过在使用 Jest 运行测试文件之前使用 Webpack 构建测试文件来解决此问题。这意味着您的 Webpack 配置中的任何特殊模块解析规则或加载器都将以与您的生产构建完全相同的方式工作。

【讨论】：

似乎是“仅链接”的不公平标签，我认为他们的答案在没有链接本身的情况下非常清晰。

【解决方案5】：

我写了mimic-webpack 来获取 webpack 配置并挂钩到 node 的 require 中，以便像 webpack 一样解析路径。我没有用 jest 测试过它，但它应该适用于任何在节点上运行的规范运行器，甚至支持简单的加载器。

【讨论】：

【解决方案6】：

笑话版23.6.0:

将此行添加到jest.config.js

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

或package.json

"jest": {
    "moduleDirectories": ["node_modules", "src"], 
    ...
}

【讨论】：