[Feature Request]: Support loaders in test

[geewoo94]

Is your feature request related to a problem? Please describe

Problem

I'm using the @storybook/react test function to integrate jest tests with storybook components. I want to use the latest feature, loaders, for API mocking, but it doesn't seem to be supported by the test at the moment. Here is the code

// storybook file
const ButtonTemplate = (args, context) => {
  // Browser environment shows: 'mock'
  // jest environment shows: undefined
  console.log(context.loaded) 

  return <Button {...args} />
}

const mockLoader = async () => await Promise({ 'mock' })

export const Default = {
  render: ButtonTemplate,
  loaders: [mockLoader],
}

// test file
import { composeStories } from '@storybook/react'
import * as stories from './Button.stories'

const { Default } = composeStories(stories)

test('loader test', () => {
  render(<Default />)
})

I looked into it and couldn't find any way to put a value loaded from jest.

// test file
# 1
import { composeStories } from '@storybook/react'
import * as stories from './Button.stories'

// not work
const { Default } = composeStories(stories, { loaders: [mockLoader] })

test('loader test', () => {
  render(<Default />)
})

# 2
import { composeStories } from '@storybook/react'
import * as stories from './Button.stories'

// not work
const { Default } = composeStories(stories)

test('loader test', async () => {
  const loaded = await mockLoader()
  // of course not work
  render(<Default loaded={loaded} />)
})

Describe the solution you'd like

Support loaders in the test.

Describe alternatives you've considered

or could anyone help me out with how I get the promise-based result?

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

Unfortunately, The function I'm trying to use can't be passed as a simple args, because I want to run a promise-based function and inject it into the component before the component is rendered. Alternative way is using useEffect instead loaders but it's not beautiful way 🥲

[Shidooo]

Does anyone know of any other workaround ?

[johntimothybailey]

@vanessayuenn Any work arounds or suggestions for us while we wait?

[johntimothybailey]

@vanessayuenn Any estimates on when this will be discussed

[vanessayuenn]

We are considering this in our roadmap for future 8.x releases!

[johntimothybailey]

@vanessayuenn What is 8.x targeted for release? Need to make plans on our ends as we consider to use tihs or not.

[yannbf]

Hey everyone! I'm closing this issue as the functionality has been implemented in #26027 (but not released yet). It will be released later on in 8.x, please be patient 🙏