配置Jest以模仿webpack解析root并解析别名

时间:2015-10-17 19:39:10

标签: webpack jestjs

我正在使用Webpack& amp;笑话。目前,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表现相同?

6 个答案:

答案 0 :(得分:29)

现在官方的jest docs中提供了一个解决方案。请参阅Webpack Tutorial

简而言之,在modulePaths中将package.json选项添加到您的jest配置中:

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

答案 1 :(得分:2)

经过一夜安眠后,我再次看了一遍,发现它不是Jest配置而是节点。模仿webpack中resolve.root配置行为的最佳方法是在运行NODE_PATH时将环境变量jest设置为同一目录:

NODE_PATH=src jest

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

答案 2 :(得分:2)

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

这个套餐看起来不成熟(几天之久),但对我来说也是如此。此外,截至目前,它要求Jest配置位于单独的jest.config.js文件中或通过CLI提供(不支持package.json)。

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

答案 5 :(得分:1)

最佳版本23.6.0

将此行添加到jest.config.js

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

或在package.json

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