storybook: Storyshots is unable to run tests using Angular 12 or 13 with storybook suite 6.4.9 ot 6.5.0-alpha.4

Describe the bug Storyshots is not running tests using Angular 12 or 13 with storybook and addons 6.4.9

To Reproduce I am using storybook with Nrwl/NX in order to get the Jest testing to work easily. I tried using the repro wizard but that only produced an angular/cli project and did not get me to a point where I could run the storyshots so, I’m supplying the exact steps to produce a minimal project that demonstrates my issue along with a link to a repo with the results of these steps.

The following will recreate my issue:

Steps to reproduce storyshot error using Angular ~13.0.0 and storybook ~6.4.5

• Create new NX Workspace with Angular

npx create-nx-workspace --preset=angular

Respond to the questions:

• workspace=demo-workspace

• application=demo

• CSS

• no Cloud

• Add Storybook plugin to NX

npm i -D @nrwl/storybook

• Add Storybook nrwl schematic

npm i -D @nrwl/storybook

• Add Storybook to demo app

npx nx g @nrwl/angular:storybook-configuration demo

Answer the questions:

• cypress=n

• Auto generate stories=y

• Auto generate specs=n

• There is a known issue that requires us to rollback the angular version from ~13.1.0 to ~13.0.0. Do so and run npm install again.

• At this point you should be able to run storybook

npx nx run demo:storybook

• Add storyshots to the project

npm install @storybook/addon-storyshots

• Add storyshots.spec.js to apps/demo/src and put the standard two lines in the file:

import initStoryShots from '@storybook/addon-storyshots';

initStoryShots();

• Add the following sections to jest.config.js file in /apps/demo

  moduleFileExtensions: ['ts', 'js', 'html', 'json', 'mjs'],
  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'
  },

This solves the spdx* issue that you would otherwise see and maps functions that no longer exists to where they’ve been moved to.

• At this point, you should be able to run the tests and see the error

npm run test

Errors on storyshots.spec.js with: “Your test suite must contain at least one test.”

A fully setup project can be found https://github.com/DaveMBush/demo-workspace

System Please paste the results of npx sb@next info here. Environment Info:

System: OS: Windows 10 10.0.22000 CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE Yarn: 3.1.1 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 96.0.4664.110 Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62) @storybook/manager-webpack5: ~6.4.5 => 6.4.9

Additional context I get the same result if I upgrade the storybook packages to 6.5.0-alpha.4

I’ve added console.log messages to the code and I can see that globalWindow.__STORYBOOK_STORY_STORE__.initializationPromise.then() never resolves (ie, then() never gets called) and storybook.raw() returns an empty array. My only conclusion is that something else needs to get called before my call to testStorySnapshots() but I am not able to determine what that might be.