[Bug]: Globals variable not properly defined

[infiniityr]

Describe the bug

In order to define the langage that the command line test should use, i try to override the prepare function to send the globals=locale:lang property.

If the URI called is the right one (ie http://127.0.0.1:6006?globals=locale:en&id=my-story-id), the context does have the default value (in my case, context.globals.locale: 'fr').

Thus, the text content in the body is always the default langage and never the one define in the global variable.

To Reproduce

// .storybook/test-runner.ts
const config: TestRunnerConfig = {
  async prepare({ page, browserContext, testRunnerConfig }) {
    const targetURL = process.env.TARGET_URL
    let URI = 'iframe.html'

    if (process.env.STORYBOOK_LANGAGE) {
      URI += `?globals=locale:${process.env.STORYBOOK_LANGAGE}`
    }

    const iframeURL = new URL(URI, targetURL).toString()

    if (testRunnerConfig?.getHttpHeaders) {
      const headers = await testRunnerConfig.getHttpHeaders(iframeURL)
      await browserContext.setExtraHTTPHeaders(headers)
    }

    await page
      .goto(iframeURL, { waitUntil: 'domcontentloaded' })
      .catch((err) => {
        if (err.message?.includes('ERR_CONNECTION_REFUSED')) {
          const errorMessage = `Could not access the Storybook instance at ${targetURL}. Are you sure it's running?\n\n${err.message}`
          throw new Error(errorMessage)
        }

        throw err
      })
  },
}

// src/mycomponent/mycomponent.stories.tsx

const meta: Meta<CustomTvxProps> = {
  // ...
  loaders: [
    async (context) => {
      await i18n.changeLanguage(context.globals.locale)
      console.log('[HOOK] BEFORE EACH - BUTTON')
      return {}
    }
  ],
}

const MyStory: StoryObj<StoryProps> = {
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)
    const label = canvas.getByTestId('translated')

    await step('is in english ?', async () => {
      // Default being 'Bonjour'
      await expect(label.textContent).toBe('Hello') // => Is always failing
    })

  }

Launch the command : STORYBOOK_LANGAGE=en npm run test-storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
  Browsers:
    Chrome: 125.0.6422.113
    Firefox: 126.0
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: 8.0.9 => 8.0.9
    @storybook/addon-designs: 8.0.1 => 8.0.1
    @storybook/addon-essentials: 8.0.9 => 8.0.9
    @storybook/addon-interactions: 8.0.9 => 8.0.9
    @storybook/addon-links: 8.0.9 => 8.0.9
    @storybook/addon-mdx-gfm: 8.0.9 => 8.0.9
    @storybook/addon-onboarding: 8.0.9 => 8.0.9
    @storybook/blocks: 8.0.9 => 8.0.9
    @storybook/preset-create-react-app: 8.0.9 => 8.0.9
    @storybook/react: 8.0.9 => 8.0.9
    @storybook/react-webpack5: 8.0.9 => 8.0.9
    @storybook/test: 8.0.9 => 8.0.9
    @storybook/test-runner: ^0.18.1 => 0.18.1
    eslint-plugin-storybook: 0.8.0 => 0.8.0
    storybook: 8.0.9 => 8.0.9
    storybook-addon-remix-react-router: 3.0.0 => 3.0.0
    storybook-react-context: 0.6.0 => 0.6.0

Additional context

FYI, the tests works fine in the Storybook web interface.