I will install Snapshot Testing with Storybook under Angular 12.
I install jest $ yarn add --dev jest jest-preset-angular @types/jest and make Settings
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
}
and set setupJest.ts Data with only one line import 'jest-preset-angular/setup-jest';.
Thats the Jest Setup. This Works for me.
The problem is the Storyshorts Addon from Storybook. I install Storyshorts yarn add @storybook/addon-storyshots --dev and create file src/storyshorts.test.js with this code:
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
When I run the command jest in my Angular Project I become this error:
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)
My Package.json has this entries:
...
"@storybook/addon-storyshots": "^6.3.12",
"@types/jest": "^27.0.2",
"jest": "^27.3.1",
"jest-preset-angular": "^10.0.1",
and Angular 12 packages.
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 :)