[Bug]: Type of canvasElement from getStoryContext is unknown

[unional]

Describe the bug

import { getStoryContext } from "@storybook/test-runner"

// in postVisit
const storyContext = await getStoryContext(page, context)
storyContext.canvasElement // type unknown should be HTMLElement

This is caused by:

interfact StoryContext<TRenderer extends Renderer = Renderer, ...> ... {

  canvasElement: TRenderer['canvasElement']
}

type Renderer = {
  canvasElement: unknown
}

To Reproduce

No response

System

Not applicable

Additional context

No response

[unional]

Note that in both preVisit and postVisit the value of canvasElement is undefined at runtime.
Not sure if that is intentional or it's a bug. In either way the type and runtime doesn't match.

[yannbf]

Hey @unional! Thanks for the report, I appreciate the question. The test-runner's getStoryContext function executes the following:

window.__STORYBOOK_PREVIEW__.storyStore.loadStory({ storyId: 'your-story-id-from-url-here' })

which is a core Storybook API, that resolves to something like this:

So I can see that it doesn't match StoryContext, but rather StoryContextForEnhancers. I'll make a fix for it! But keep in mind that this is mostly a Typescript fix, making the type more true to the actual return values, rather than having canvasElement available. In fact, even if canvasElement was available, you wouldn't be able to get it fully, as it's transported from Browser to Node by Playwright, and it would essentially give you something like { canvasElement: 'ref: <Node>' } rather than an actual DOM element.