[Bug]: storyshots + puppeteer -> rendering blank page after upgrading to 7.1.1

[manuartero]

Describe the bug

• Upgraded to Storybook 7.1.1.
• Storyshots tests (using @storybook/addon-storyshots-puppeteer) rendering all blank pages for every story.
• Storybook does work as expected (dev build and prod build)

---

Relevant code

storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

const getMatchOptions = ({ context: { kind, story }, url }) => {
  return {
    failureThreshold: 0.2,
    failureThresholdType: 'percent',
  };
};

initStoryshots({
  framework: 'react',
  suite: 'Image storyshots',
  test: imageSnapshot({
    storybookUrl: process.env.STORYBOOK_URL || 'http://localhost:6006',
    getMatchOptions,
  }),
});

storybook/main.js

const config = {
  stories: ['../src/**/*.stories.@(jsx|tsx)'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  addons: ['@storybook/addon-actions', '@storybook/addon-docs', '@storybook/addon-links'],
  docs: {
    autodocs: false,
  },
};

export default config;

storybook/preview.js

import React from 'react';
import { LiteralsProvider } from '../src/context';

import '../src/assets/styles/index.scss';
import './storybook.css';
import '../src/assets/fonts/fontello/css/lam-font.css';

['modal-root', 'loader-root'].forEach((id) => {
  const div = document.createElement('div');
  div.setAttribute('id', id);
  document.querySelector('body').appendChild(div);
});

const preview = {
  decorators: [
    (Story) => (
      <LiteralsProvider>
        <Story />
      </LiteralsProvider>
    ),
  ],
};

export default preview;

To Reproduce

https://github.com/manuartero/storybook-bug-report-25j

System

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-actions: 7.1.1 => 7.1.1
    @storybook/addon-docs: 7.1.1 => 7.1.1
    @storybook/addon-links: 7.1.1 => 7.1.1
    @storybook/addon-storyshots: 7.1.1 => 7.1.1
    @storybook/addon-storyshots-puppeteer: 7.1.1 => 7.1.1
    @storybook/addons: 7.1.1 => 7.1.1
    @storybook/react: 7.1.1 => 7.1.1
    @storybook/react-vite: 7.1.1 => 7.1.1

Additional context

The storybook does render , the problem is that storyshots.test.js render blank storyshots;

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

const getMatchOptions = ({ context: { kind, story }, url }) => {
  return {
    failureThreshold: 0.2,
    failureThresholdType: 'percent',
  };
};

initStoryshots({
  framework: 'react',
  suite: 'Image storyshots',
  test: imageSnapshot({
    storybookUrl: process.env.STORYBOOK_URL || 'http://localhost:6006',
    getMatchOptions,
  }),
});

[manuartero]

update:

I've detected this is a «wait for rendering» issue, since adding this option:

+ const beforeScreenshot = () => new Promise((resolve) => setTimeout(resolve, 300));
+
initStoryshots({
  framework: 'react',
  suite: 'Image storyshots',
  test: imageSnapshot({
    storybookUrl: process.env.STORYBOOK_URL || 'http://localhost:6006',
    getMatchOptions,
+   beforeScreenshot,
  }),
});

seems to do the trick. I mean, it renders the sotryshots and I may have a workaround?

... thing is, IMO adding timeouts is a weak fix. 300ms is just an arbitrary value

new Promise((resolve) => setTimeout(resolve, 300));

---

so I've tried also these:

🔴 trying to detect when I can resolve() before the screenshot

const beforeScreenshot: (page, _ctx) => {
  return new Promise((resolve) =>
    page.waitForNetworkIdle().then(() => { 
      resolve();
    })
  );
},

🔴 trying the asynJest?

initStoryshots({
+  asyncJest: true,

🔴 Trying to use { waitUntil: 'domcontentloaded' }

const getGotoOptions = (_ctx) => ({
  waitUntil: 'domcontentloaded',
});

[jonniebigodes]

The Storyshots addon is officially deprecated and will be removed in a future release of Storybook. To help with the transition process, we've created a migration guide for the available options and common use cases.