Storybook Addon StoryShots for Angular 12

user_4818326 0
Viewed 430

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.

snapshot-testing angular-storybook storybook angular jestjs
1 Answers

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"]
}

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

user_42714300
Related