配置 Jest 以模仿 webpack 解析根和解析别名

Question

我正在使用 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。

但是，当我运行对具有上述行的文件进行测试时，在解析所需 module/asset.

的路径时出现错误

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 相同？

Answer 1

经过一夜安眠后，我再次查看了这个，意识到这不是一个 Jest 配置，而是一个节点。在 webpack 中模仿 resolve.root 配置行为的最佳方法是在运行 jest:

时将环境变量 NODE_PATH 设置为同一目录

NODE_PATH=src jest

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

您可以使用 Jest 20+ resolver option and plug it with jest-webpack-resolver

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

Answer 6

开玩笑版本23.6.0:

将此行添加到 jest.config.js

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

或 package.json

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

配置 Jest 以模仿 webpack 解析根和解析别名

Configuring Jest to mimic webpack resolve root and resolve alias

webpack

jestjs