Storybook Addon StoryShots for Angular 12

Question

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.

Answer 1

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 :)