[Bug]: Angular + storyshots broken in 7.1.0

[mattlewis92]

Describe the bug

Attempting to use storyshots with angular is broken in 7.x:

mattlewis@Matts-MBP-3 taskbox % npm t

> taskbox@0.2.0 test
> jest --no-cache

Determining test suites to run...
ngcc-jest-processor: running ngcc
 PASS  src/app/app.component.spec.ts
 FAIL  src/stories/Storyshots.test.js
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'clientApi')

      1 | import initStoryshots from '@storybook/addon-storyshots';
      2 |
    > 3 | initStoryshots({ framework: 'angular' });
        |               ^
      4 |

      at node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:34:49
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/angular/loader.js:39:23)
      at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:36:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:28:99)
      at Object.<anonymous> (src/stories/Storyshots.test.js:3:15)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.395 s
Ran all test suites.

All I did to setup that repo was:

1. Clone the starter repo here: https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/
2. Upgrade to latest storybook (bug exists on 7.0.x + 7.1.x though, last known working version was 6.x)
3. Setup storyshots according to the guide here: https://storybook.js.org/addons/@storybook/addon-storyshots

To Reproduce

git clone https://github.com/mattlewis92/storybook-storyshot-bug.git
cd storybook-storyshot-bug
npm i
npm t

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.7.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.102
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-essentials: ^7.1.0 => 7.1.0 
    @storybook/addon-interactions: ^7.1.0 => 7.1.0 
    @storybook/addon-links: ^7.1.0 => 7.1.0 
    @storybook/addon-storyshots: ^7.1.0 => 7.1.0 
    @storybook/angular: ^7.1.0 => 7.1.0 
    @storybook/blocks: ^7.1.0 => 7.1.0 
    @storybook/jest: ^0.1.0 => 0.1.0 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[valentinpalkovic]

Hey there,

Just dropping by with a quick update on Storyshots.

We're shifting focus towards the test-runner for the future: Test-runner.

Also, give the 'play' function a spin for your expectations: Play function.

So, we won't be updating Storyshots further or fixing issues related to current versions of Storybook, but feel free to contribute a fix if this is pressuring for you.

[mattlewis92]

Sounds good, thanks @valentinpalkovic! I just sent a PR with the fix here: #23555

[Adrii77]

Hey @mattlewis92 ! Any reason why you closed your PR ?

I have exactly the issue you fixed :TypeError: Cannot read properties of undefined (reading 'imports') (imports is destructured from analyzedMetadata inside createStorybookWrapperComponent)

[mattlewis92]

Hey @mattlewis92 ! Any reason why you closed your PR ?

I have exactly the issue you fixed :TypeError: Cannot read properties of undefined (reading 'imports') (imports is destructured from analyzedMetadata inside createStorybookWrapperComponent)

oops, didn't mean to do that, re-opened!

[Adrii77]

@mattlewis92 btw, did you face a strange behavior (always with storyshots 7.1 and Ng16) where it seems to completely ignoring all provided services inside applicationConfig from preview.ts file ?

[mattlewis92]

@mattlewis92 btw, did you face a strange behavior (always with storyshots 7.1 and Ng16) where it seems to completely ignoring all provided services inside applicationConfig from preview.ts file ?

I haven't encountered this, upon applying this patch I was able to get storyshots to work fine with latest angular 16.1 + storybook 7.1

[Adrii77]

Ok, thank you for your answer ! Just one last question : do you provide injectable with applicationConfig from preview.ts too ?

[mattlewis92]

Ok, thank you for your answer ! Just one last question : do you provide injectable with applicationConfig from preview.ts too ?

Not that I can see, I couldn't see us providing anything in our preview.js file or any references to applicationConfig