loki: Failing to fetch stories with Storybook 7.0

storybook 7.1 , loki 0.32.0 on CI it always fires this Error ( , are u sure it fixed ?

FWIW, we migrated from Loki to Storycap + reg-cli for Storybook 7 support. Storycap seems to also be much faster as a bonus.

I’ve seen many times on the forums that loki doesn’t work with storybook > 7 in production build and in CI. None of the solutions helped. Any opinions on how to fix this ?

Fixed in 0.32.0

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0 -k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

I solved the problem with running Loki + Storybook 7 screenshot tests in CI! 🎉

Instructions:

1. Install concurrently npm i concurrently, to run processes in parallel

2. Configure a command to start Storybook server and Loki screenshot tests: "test_ui_ci": "concurrently --kill-others \"storybook dev -p 6006\" \"npx loki test\"

The --kill-others parameter will terminate the other processes if one of the processes running concurrently is terminated. Accordingly, when the Loki screenshot test finishes, the Storybook server that was running in parallel finishes afterwards. After the processes are finished, the commands in CI are executed further.

Example from my package.json:

Problems remain when testing in CI with the latest version of Loki 0.31.2 and Storybook v7

Any idea how to fix this? Or maybe there is a workaround for testing in CI with Loki and Storybook 7?

I’m in the middle of the upgrade to SB 7 and hitting this roadblock as well

I have trouble, locally all tests pass, but from GitHub actions - 80% of tests fail

Is there really no way to run loki on the build output of a storybook 7 build? running both in parallel in CI only looks like a workaround and not like a solution

test-cra-init.sh

I could not find an example with test-cra-init.sh in #451

How can I run the Storybook server in parallel with the tests in CI so that the Storybook server completes the process after the screenshot tests in CI are done?

Yes, I have been this trouble too. For fix write a decorator for Storybook so that Loki uses a delay before taking a screenshot.

Good, one more solution: (npm i concurrently, npm i deelay) "test:ui:ci": "concurrently --kill-others --raw --success first \"npm run storybook\" \"npm run test:ui\" \"deelay\"",

Every screenshot is different with this…

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0 -k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

@tony-show Cool! And how do you deal with killing the process of the local server, which ends with code 1 (error)?

Yes, that was the next bug in CI with successfully completed screenshot tests 😂

We need to add the -s or --success parameter to command the Storybook server to stop with code 0 instead of 1, when the Loki tests successfully completed with code 0.

Like this: "concurrently -s first -k \"npm run storybook\" \"npm run test:ui\""

-s or -success first - Finishes first process with code 0 -k or --kill-others - Kill other processes if one exits or dies.

And everything works great in CI! 🎉

May I see your GitHub project, please?

Looks like this could be something to do with a cors issue on docker/chrome. When I open the docker logs while running loki I see the following:

2023-04-26 11:29:12 [0426/162912.207682:ERROR:bus.cc(398)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
2023-04-26 11:29:12 [0426/162912.208238:ERROR:bus.cc(398)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
2023-04-26 11:29:12 
2023-04-26 11:29:12 DevTools listening on ws://0.0.0.0:59950/devtools/browser/052d0826-98dd-416b-93a0-5293b04eeb3f
2023-04-26 11:29:12 [0426/162912.213352:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
2023-04-26 11:29:12 [0426/162912.216004:ERROR:gpu_init.cc(486)] Passthrough is not supported, GL is disabled, ANGLE is 
2023-04-26 11:29:22 [0426/162922.250867:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-regular.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.251377:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-italic.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.251799:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-bold.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.252173:INFO:CONSOLE(0)] "Access to link prefetch resource at 'file:///var/loki/sb-common-assets/nunito-sans-bold-italic.woff2' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.480742:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/sb-preview/runtime.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.480978:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/runtime~main.b8614f2c.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.481479:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/4523.7e0f1f85.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)
2023-04-26 11:29:22 [0426/162922.483262:INFO:CONSOLE(0)] "Access to script at 'file:///var/loki/main.dc697dd9.iframe.bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.", source: file:///var/loki/iframe.html (0)

Same issue, a fix would help. 🙏