Storyshots Addon: Cannot find module 'jest-preset-angular/setupJest' from 'loader.js'

Describe the bug Starting the jest storyshots test fails with

Cannot find module 'jest-preset-angular/setupJest' from 'loader.js'

      at Resolver.resolveModule (../node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:230:17)
      at setupAngularJestPreset (../node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:29:11)
      at Object.load (../node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:37:3)
      at loadFramework (../node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:31:17)
      at Object.testStorySnapshots [as default] (../node_modules/@storybook/addon-storyshots/dist/api/index.js:57:36)

this is due to a change in the jest-preset-angular module structure the library moved the code in the npm package from the root dir to ./build

To Reproduce Set up a Storybook Angular project with storyshots addon. And start the jest screenshot test.

Expected behavior tests should run

Workaround

Mapping the jest-preset-angular module to the new path

moduleNameMapper: {
        'jest-preset-angular/(.*)':'<rootDir>/../node_modules/jest-preset-angular/build/$1'
    }

Additional context

I think fixes should be applied here

// storybook/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
 require.requireActual('jest-preset-angular/setupJest');

// storybook/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts

// eslint-disable-next-line import/no-extraneous-dependencies
import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
// eslint-disable-next-line import/no-extraneous-dependencies
import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';

[JMainol]

I have 1 solution that works for me. I am working with these versions:

"jest": "^26.6.2",
"jest-preset-angular": "^7.1.1",

The problem is in jest-preset-angular module the dir root has changed. Now the folder /build doesnt exist. So you have to change calls to jest-preset-angular dir structure on these two files

storybook/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts storybook/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts

Here is properly explained: https://www.gitmemory.com/issue/storybookjs/storybook/9072/562472401

[emanguy]

I had this problem too. My workaround was to install jest-preset-angular at version 6.x where the file structure matched that of the instructions.

See if running npm install --save-dev jest-preset-angular@6.x fixes the issue for now.