Angular 12配置Storybook Addon StoryShots运行jest报模块缺失错误如何解决

问题根因 #

你使用的jest-preset-angular v10+版本重构了内部文件结构，移除了原build/setup-jest路径下的入口文件，而@storybook/addon-storyshots v6.3.x的Angular适配逻辑仍硬编码读取旧路径，因此抛出模块找不到的错误。

解决方案 #

优先选择方案一，无需修改全局Jest配置即可解决：

方案一：关闭StoryShots自动预设加载

你已经在Jest全局配置中完成了jest-preset-angular的初始化，不需要StoryShots重复加载预设，修改src/storyshots.test.js文件内容如下：

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  framework: 'angular',
  config: {
    applyJestPreset: false
  }
});

修改后重新执行jest命令即可正常运行快照测试。

方案二：配置Jest路径映射

如果方案一不生效，可在Jest配置中添加路径映射规则，将旧路径重定向到新的正确路径，修改package.json中的jest配置项：

"jest": {
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"],
  "moduleNameMapper": {
    "^jest-preset-angular/build/setup-jest$": "jest-preset-angular/setup-jest"
  }
}

可选方案：升级StoryShots版本

如果你的项目允许升级依赖，可将@storybook/addon-storyshots升级到6.4.0及以上版本，官方已在后续版本中修复了该路径兼容问题，无需额外修改配置即可正常运行。

内容的提问来源于stack exchange，提问作者Steffen Kämmerer