用于Angular 12的故事书插件StoryShots

Question

我将在Angular 12下使用Storybook安装快照测试。我安装jest $ yarn add --dev jest jest-preset-angular @types/jest并进行设置

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

并且仅用一行import 'jest-preset-angular/setup-jest';来设置setupJest.ts数据。

这就是Jest设置。这对我很有效。

问题出在Storybook中的Storyshorts插件。我用下面的代码安装了Storyshorts yarn add @storybook/addon-storyshots --dev并创建了文件src/storyshorts.test.js：

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

initStoryshots();

当我在我的Angular项目中运行命令jest时，我变成了这个错误：

Cannot find module 'jest-preset-angular/build/setup-jest' from 'node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js'
  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
  at setupAngularJestPreset (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js:36:14)
  at Object.load (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js:43:5)
  at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/frameworkLoader.js:26:19)
  at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:42:39)

我的Package.json包含以下条目：

...
"@storybook/addon-storyshots": "^6.3.12",
"@types/jest": "^27.0.2",
"jest": "^27.3.1",
"jest-preset-angular": "^10.0.1",

和Angular 12包。

Answer 1

欢迎来到地狱:D！

对于你的问题: storyshots插件试图从错误的路径加载setup-jest.ts文件。从jest-preset-angular版本9开始，setup-jest.ts不再位于jest-preset-angular/build/文件夹中(并且这不是唯一受影响的文件)。Storyshot addon还不能处理这个变化，所以你可以使用jest config中的moduleNameMapper来重写路径并修复你的问题。

以我的jest.config.js为例：

​

require('jest-preset-angular/ngcc-jest-processor');

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!(@storybook/addon-docs))',
  ],
  moduleNameMapper: {
    'jest-preset-angular/build/setup-jest': 'jest-preset-angular/setup-jest',
    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer':
      'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/AngularSnapshotSerializer':
      'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/HTMLCommentSerializer':
      'jest-preset-angular/build/serializers/html-comment',
  },
};

​

如果你需要更多的解释，请问我:)