Angular 12 的 Storybook 插件 StoryShots
Posted
技术标签:
【中文标题】Angular 12 的 Storybook 插件 StoryShots【英文标题】:Storybook Addon StoryShots for Angular 12 【发布时间】:2021-12-07 22:20:28 【问题描述】:我将在 Angular 12 下使用 Storybook 安装快照测试。
我安装 jest $ yarn add --dev jest jest-preset-angular @types/jest
并进行设置
"jest":
"preset": "jest-preset-angular",
"setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
并设置 setupJest.ts 数据只有一行import 'jest-preset-angular/setup-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 包。
【问题讨论】:
【参考方案1】:欢迎来到地狱:D!
对于您的问题:storyshots 插件尝试从错误的路径加载 setup-jest.ts
文件。由于 jest-preset-angular
版本 9,setup-jest.ts
不再位于 jest-preset-angular/build/
文件夹中(这不是唯一受影响的文件)。
Storyshots 插件尚未处理此更改,因此您可以使用 jest 配置中的 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',
,
;
如果你需要更多解释,问我:)
【讨论】:
以上是关于Angular 12 的 Storybook 插件 StoryShots的主要内容,如果未能解决你的问题,请参考以下文章
Angular 中的子组件在 Storybook 中无法识别,而与 ng serve 完美配合
Angular 的 Storybook 不显示由 Kendo UI 创建的元素