EDIT (28/11/2023)
Since Storybook 7.6, Storyhots is now officially deprecated, is no longer being maintained, and will be removed in the next major release of Storybook.
You should migrate your snapshots test from Storyshots to Storybook's test runner with the help of this migration guide.
EDIT : >= Angular 16
Context
- With jest-preset-angular 13.1.X
- With @storybook/addon-storyshots 7.X.X
You'll not be able to run Storyshots anymore due to a bug (TypeError: Cannot destructure property 'imports' of 'analyzedMetadata' as it is undefined.)
A PR is currently open to fix it (https://github.com/storybookjs/storybook/pull/23555).
I’ll provide the new jest configuration when the PR will be merged.
Also, you should note that StoryShots will be deprecated in a near futur and will be replaced by the test-runner (a migration guide will be provided by the core team, stay tune).
Therefore, Storyshots will not be improved / changed (except by the community until its deprecation date).
EDIT: >= Angular 13 :
Context
- With
jest-preset-angular 12.X.X
- With
@storybook/addon-storyshots 6.5.X
As I kept Karma/Jasmine for unit testing (bigger community), Jest is only for snapshots tests with Storybook, so my jest.config.js is under the .storybook folder and I created a specific tsconfig file.
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"]
}
empty.js
/**
* This file is used to prevent mdx files importation during snapshot testing with Jest (see jest.config.js).
* I tried with testPathIgnorePatterns or storyKindRegex, but impossible.
*/
module.exports = {
process: function () {
return { code: '' };
},
};
=== 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 :)
