Node16イメージで立ち上げたstorybookでstorybook-test-runnerの導入に小一時間悩んだ

僕はただstorybook-test-runnerを動かしたかったんだ

storybookがnode18だと起動しない

• 以下のエラーが出て、ググるとNodeのバージョンを下げろとのこと

root@b2c7bb5b0a08:/app# npm run storybook

> frontend@0.0.0 storybook
> start-storybook -p 6006

info @storybook/vue3 v6.5.9
info
info => Loading presets

info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished:
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/app/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/app/node_modules/webpack/lib/NormalModule.js:471:10)
    at /app/node_modules/webpack/lib/NormalModule.js:503:5
    at /app/node_modules/webpack/lib/NormalModule.js:358:12
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/app/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.2.0

docker-compose.yml(一部抜粋)

  frontend:
    image: node:18
    container_name: frontend
    volumes:
      - ./frontend:/app
    tty: true
    ports:
      - 3000:3000
    working_dir: /app
    networks:
        - app_network

  storybook:
    image: node:16
    container_name: storybook
    volumes:
      - ./frontend:/app
    tty: true
    ports:
      - 6006:6006
    working_dir: /app
    networks:
        - app_network

これでstorybookも動くし、storyboook-jestも動くしで安心していたらstorybook-test-runnerを実行してエラー発生
*.soが足りないぞとか怒られるので、裏で色々とインストールもしています。

Error: Browser closed.
==================== Browser output: ====================
<launching> /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome --disable-field-trial-config --disable-background-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-background-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=ImprovedCookieControls,LazyFrameLoading,GlobalMediaControls,DestroyProfileOnBrowserClose,MediaRouter,DialMediaRouteProvider,AcceptCHFrame,AutoExpandDetailsElement,CertificateTransparencyComponentUpdater,AvoidUnnecessaryBeforeUnloadCheckSync --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-backgrounding --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-wvxcaN --remote-debugging-pipe --no-startup-window
<launched> pid=25738
[pid=25738][err] /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome: /lib/aarch64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome)
[pid=25738] <process did exit: exitCode=1, signal=null>
[pid=25738] starting temporary directories cleanup Failed to launch browser.
==================== Browser output: ====================
<launching> /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome --disable-field-trial-config --disable-background-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-background-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=ImprovedCookieControls,LazyFrameLoading,GlobalMediaControls,DestroyProfileOnBrowserClose,MediaRouter,DialMediaRouteProvider,AcceptCHFrame,AutoExpandDetailsElement,CertificateTransparencyComponentUpdater,AvoidUnnecessaryBeforeUnloadCheckSync --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-backgrounding --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-wvxcaN --remote-debugging-pipe --no-startup-window
<launched> pid=25738
[pid=25738][err] /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome: /lib/aarch64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /root/.cache/ms-playwright/chromium-1012/chrome-linux/chrome)
[pid=25738] <process did exit: exitCode=1, signal=null>
[pid=25738] starting temporary directories cleanup
    at /app/node_modules/playwright-core/lib/server/chromium/crConnection.js:204:16
    at new Promise (<anonymous>)
    at CRSession.send (/app/node_modules/playwright-core/lib/server/chromium/crConnection.js:200:12)
    at Function.connect (/app/node_modules/playwright-core/lib/server/chromium/crBrowser.js:58:35)
    at Chromium._connectToTransport (/app/node_modules/playwright-core/lib/server/chromium/chromium.js:165:33)
    at Chromium._innerLaunch (/app/node_modules/playwright-core/lib/server/browserType.js:152:32)
    at async Chromium._innerLaunchWithRetries (/app/node_modules/playwright-core/lib/server/browserType.js:109:14)
    at async ProgressController.run (/app/node_modules/playwright-core/lib/server/progress.js:101:22)
    at async Chromium.launch (/app/node_modules/playwright-core/lib/server/browserType.js:84:21)
    at async BrowserServerLauncherImpl.launchServer (/app/node_modules/playwright-core/lib/browserServerImpl.js:49:21)

調べてみると、Node16イメージがDebian10ベースなのでDebian11に上げるのがいいよという意見ばかり
困ったなあと思いつつ色々と試行錯誤していたところ、最初の頃にstorybookを立ち上げない状態でstorybook-testを実行してURL指定してねと怒られたことを思い出す。
package.jsonの内容を下記に変更

- "test-storybook": "test-storybook",
+ "test-storybook": "test-storybook --url http://storybook:6006",

これで動くんじゃね？と淡い望みを抱きつつ実行すると以下のエラー

root@b2c7bb5b0a08:/app# npm run test-storybook

> frontend@0.0.0 test-storybook
> test-storybook --url http://storybook:6006

[test-storybook] Detected a remote Storybook URL, running in stories json mode. To disable this, run the command again with --no-stories-json
Failed to fetch stories.json from http://storybook:6006/stories.json
More info: https://github.com/storybookjs/test-runner/blob/main/README.md#storiesjson-mode

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at transformPlaywrightJson (/app/node_modules/@storybook/test-runner/dist/cjs/playwright/transformPlaywrightJson.js:47:21)
    at fetchStoriesJson (/app/node_modules/@storybook/test-runner/bin/test-storybook.js:151:27)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async main (/app/node_modules/@storybook/test-runner/bin/test-storybook.js:228:25)

エラーに従い、以下の様にオプションを追加

-        "test-storybook": "test-storybook --url http://storybook:6006",
+        "test-storybook": "test-storybook --url http://storybook:6006 --no-stories-json",

これでようやく動いた！
久々にnode18ベースのコンテナで間違ってnpm run storybook叩いたら普通にstorybook動いたんだけど、この苦労いらんかったのでは？