Storybook Addon StoryShots for Angular 12
Solution 1:
EDIT: After updating to Angular 13 :
/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globals: {
"ts-jest": {
tsconfig: '<rootDir>/tsconfig.storyshots.json',
}
},
transformIgnorePatterns: [],
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',
}
};=== Original (Angular 12) ===
Welcome in hell :D !
For your problem : storyshots addon try to load setup-jest.ts file from a bad path. Since jest-preset-angular version 9, setup-jest.ts is no longer located into jest-preset-angular/build/ folder (and this is not the only impacted file).
Storyshots addon doesn't handle this change yet, so you can use moduleNameMapper from jest config to rewrite path and fix your issue.
See my jest.config.js as example :
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',
},
};If you need more explanation, ask me :)