Angular 12 的 Storybook 插件 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"]
}

並設置 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 包。

Answer 1

編輯： >= 角 13 ：

語境

• 用jest-preset-angular 12.XX
• 使用@storybook/addon-storyshots 6.5.X

由於我將Karma/Jasmine用於單元測試（更大的社區）， Jest僅用於Storybook的快照測試，所以我的jest.config.js位於.storybook文件夾下，我創建了一個特定的tsconfig文件。

jest.config.js

 const { defaults: jestNgPreset } = require('jest-preset-angular/presets'); /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ module.exports = { rootDir: '../', preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/.storybook/setup-jest.ts'], // Ensure to run ngcc for uncompliant Ivy lib globalSetup: 'jest-preset-angular/global-setup', globals: { 'ts-jest': { ...jestNgPreset.globals['ts-jest'], tsconfig: '<rootDir>/.storybook/tsconfig.storyshots.json', }, }, transform: { ...jestNgPreset.transform, '^.+\\.stories\\.mdx?$': '<rootDir>/.storybook/empty.js', }, // Don't transform files in node_modules, except those which match those patterns transformIgnorePatterns: [ '<rootDir>/node_modules/(?!.*\\.mjs$|@storybook/addon-docs/angular|@angular|primeng|angular-auth-oidc-client)', ], 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', }, };

tsconfig.storyshots.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "skipLibCheck": true,
    "outDir": "./out-tsc/spec",
    "module": "CommonJS",
    "types": ["jest"]
  },
  "files": ["./typings.d.ts"]
}

===原始（Angular 12） ===

歡迎來到地獄：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', }, };

如果您需要更多解釋，請問我:)