Not working with addon-storyshots-puppeteer

[FezVrasta]

Hi, this addon seems to break the Storybook storyshots addon. Here's a repro (I simply ran yarn create react-app && npx sb init and then added storyshots and msw):

https://github.com/FezVrasta/msw-storybook-test

Just run yarn test storybook.test.js and you will notice the tests error due to a timeout.

 ● Storyshots › Example/Page › Logged Out

    thrown: "Exceeded timeout of 15000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      4 | import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
      5 |
    > 6 | initStoryshots({
        | ^
      7 |   test: imageSnapshot(),
      8 | });
      9 |

      at node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:29:37
          at Array.forEach (<anonymous>)
      at callTestMethodGlobals (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:27:13)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:73:9)
      at Object.<anonymous> (src/storybook.test.js:6:1)

A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks.

I noticed that replacing Puppeteer with Playwright, as explained here fixes the issue.

Could you please look into it?

[yannbf]

Hey @FezVrasta thanks for pointing this out. I believe the problem is related to a combination of puppeteer and msw/node.

What you can do to circumvent this for now is to add a check in your preview.js:

import { initialize, mswDecorator } from 'msw-storybook-addon';

if(!global.test) { // only run this in the browser
  initialize()
}

---

@kettanaito do you have any idea what could be going on? I was debugging and I reached the following warning:

    [MSW] Warning: captured a request without a matching request handler:
    
      • GET http://127.0.0.1:51405/devtools/browser/abc438f5-dac6-4b51-b9a6-dcc71d277543
    
    If you still wish to intercept this unhandled request, please create a request handler for it.
    Read more: https://mswjs.io/docs/getting-started/mocks

I removed the msw-addon stuff from preview.js and used msw/node directly, having the same error:

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

// The required import from the @storybook/addon-storyshots-puppeteer addon
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

import { setupServer } from 'msw/node'

setupServer().listen()

initStoryshots({
  test: imageSnapshot()
});

The handleRequest method from msw reaches onUnhandledRequest and then emits some events. From there, the process hangs up.

[cgat]

import { initialize, mswDecorator } from 'msw-storybook-addon';

if(!global.test) { // only run this in the browser
  initialize()
}

@yannbf Am I correct in thinking that this will disable msw when pupeeter is running, effectively making the actual api calls?

[kettanaito]

@yannbf, those events don't seem to be causing the issue. It has to be something else.

Also, highly recommend updating msw since we've introduced built-in common asset identification so you will be getting unhandled warnings much less frequently now.

I noticed that storybookjs/storybook#10162 (comment) fixes the issue.

If this is the case, doesn't it sound like the Storyshots add-on issue? 🤔