[Bug]: v9 VR tests silently fail when griffel `makeStyles` api is used directly for story rendering

[Hotell]

Component

Other...

Package version

latest

React version

17

Environment

not applicable

Current Behavior

We already shipped new StoryWright features that reverted 2k+ lost VR test (#33759).

While migrating to the new SW version I ran into more issues within our stories and VR processing.

Actual issue description:

Note: SW = StoryWright

SW was silently failing when issues occured during processing VR test Story to obtain Steps definition.

Whenever we use griffel makeStyles within VR Story in order to tweak test cases, SW would throw error and completely ignore these VR Test for processing.

While running storybook storyFn() to obtain dynamically Story object and its props in order to acquire steps prop, it would throw on Griffel not able to find Context for text direction.

Although the component render tree works as expected ↓

the under the hood mechanism of using storyFn() directly won't properly load the decorators hierarchy in order to get React Context which is needed for Griffel.

Affected VR Test:

"Error processing render() method of:badge-converged--size-tiny",
    "Error processing render() method of:badge-converged--size-tiny-rtl",
    "Error processing render() method of:badge-converged--size-extra-small",
    "Error processing render() method of:badge-converged--size-extra-small-rtl",
    "Error processing render() method of:badge-converged--size-small",
    "Error processing render() method of:badge-converged--size-small-rtl",
    "Error processing render() method of:badge-converged--size-medium",
    "Error processing render() method of:badge-converged--size-medium-rtl",
    "Error processing render() method of:badge-converged--size-large",
    "Error processing render() method of:badge-converged--size-large-rtl",
    "Error processing render() method of:badge-converged--size-extra-large",
    "Error processing render() method of:badge-converged--size-extra-large-rtl",
    "Error processing render() method of:badge-converged--width-constrained",

    "Error processing render() method of:button-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:button-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:button-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:compoundbutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:menubutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:splitbutton-converged--size-large-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-small-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-medium-with-long-text-wrapping",
    "Error processing render() method of:togglebutton-converged--size-large-with-long-text-wrapping",

    "Error processing render() method of:card-converged--orientation",

    "Error processing render() method of:fluentprovider-customstylehooks--button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--compound-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--menu-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--split-button-custom-styles",
    "Error processing render() method of:fluentprovider-customstylehooks--toggle-button-custom-styles",

    "Error processing render() method of:progressbar-converged--indeterminate-thickness",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-dark-mode",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-high-contrast",
    "Error processing render() method of:progressbar-converged--indeterminate-thickness-rtl",

    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-rectangle-rtl",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-circle-rtl",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-high-contrast",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-dark-mode",
    "Error processing render() method of:skeleton-converged--opaque-skeleton-with-square-rtl",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-rectangle-dark-mode",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-circle-dark-mode",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square-high-contrast",
    "Error processing render() method of:skeleton-converged--translucent-skeleton-with-square-dark-mode",

    "Error processing render() method of:slider-converged--customized-slider",

    "Error processing render() method of:spinbutton-converged--custom-width",
    "Error processing render() method of:spinbutton-converged--custom-width-rtl",
    "Error processing render() method of:spinbutton-converged--custom-width-high-contrast",
    "Error processing render() method of:spinbutton-converged--custom-width-dark-mode",

    "Error processing render() method of:spinner-converged--primary",
    "Error processing render() method of:spinner-converged--primary-high-contrast",
    "Error processing render() method of:spinner-converged--primary-dark-mode",
    "Error processing render() method of:spinner-converged--primary-with-label",
    "Error processing render() method of:spinner-converged--primary-with-label-high-contrast",
    "Error processing render() method of:spinner-converged--primary-with-label-dark-mode",
    "Error processing render() method of:spinner-converged--primary-with-label-rtl",
    "Error processing render() method of:spinner-converged--primary-size",
    "Error processing render() method of:spinner-converged--inverted",
    "Error processing render() method of:spinner-converged--inverted-high-contrast",
    "Error processing render() method of:spinner-converged--inverted-dark-mode",
    "Error processing render() method of:spinner-converged--inverted-with-label",
    "Error processing render() method of:spinner-converged--inverted-with-label-high-contrast",
    "Error processing render() method of:spinner-converged--inverted-with-label-dark-mode",
    "Error processing render() method of:spinner-converged--animation",
    "Error processing render() method of:spinner-converged--animation-rtl",

    "Error processing render() method of:interactiontag-converged--with-icon-box-sizing",

    "Error processing render() method of:tagpicker--default",
    "Error processing render() method of:tagpicker--default-dark-mode",
    "Error processing render() method of:tagpicker--default-high-contrast",
    "Error processing render() method of:tagpicker--default-rtl",
    "Error processing render() method of:tagpicker--default-open",
    "Error processing render() method of:tagpicker--default-open-dark-mode",
    "Error processing render() method of:tagpicker--default-open-high-contrast",
    "Error processing render() method of:tagpicker--default-open-rtl",
    "Error processing render() method of:tagpicker--appearance",
    "Error processing render() method of:tagpicker--appearance-dark-mode",
    "Error processing render() method of:tagpicker--appearance-high-contrast",
    "Error processing render() method of:tagpicker--appearance-rtl",
    "Error processing render() method of:tagpicker--disabled",
    "Error processing render() method of:tagpicker--disabled-dark-mode",
    "Error processing render() method of:tagpicker--disabled-high-contrast",
    "Error processing render() method of:tagpicker--disabled-rtl",
    "Error processing render() method of:tagpicker--expand-icon",
    "Error processing render() method of:tagpicker--expand-icon-dark-mode",
    "Error processing render() method of:tagpicker--expand-icon-high-contrast",
    "Error processing render() method of:tagpicker--expand-icon-rtl",
    "Error processing render() method of:tagpicker--grouped",
    "Error processing render() method of:tagpicker--grouped-dark-mode",
    "Error processing render() method of:tagpicker--grouped-high-contrast",
    "Error processing render() method of:tagpicker--grouped-rtl",
    "Error processing render() method of:tagpicker--secondary-action",
    "Error processing render() method of:tagpicker--secondary-action-dark-mode",
    "Error processing render() method of:tagpicker--secondary-action-high-contrast",
    "Error processing render() method of:tagpicker--secondary-action-rtl",

    "Error processing render() method of:toolbar-converged--far-group",
    "Error processing render() method of:tooltip-converged--basic",
    "Error processing render() method of:tooltip-converged--basic-dark-mode",
    "Error processing render() method of:tooltip-converged--basic-high-contrast",
    "Error processing render() method of:tooltip-converged--inverted",
    "Error processing render() method of:tooltip-converged--inverted-dark-mode",
    "Error processing render() method of:tooltip-converged--with-arrow",
    "Error processing render() method of:tooltip-converged--with-arrow-dark-mode",
    "Error processing render() method of:tooltip-converged--with-arrow-high-contrast",
    "Error processing render() method of:tooltip-converged--inverted-with-arrow",
    "Error processing render() method of:tooltip-converged--inverted-with-arrow-dark-mode",
    "Error processing render() method of:tooltip-converged--text-wrapping",
    "Error processing render() method of:tooltip-converged--overflow-wrap",
    "Error processing render() method of:tooltip-converged--overflow-wrap-with-arrow",

    "Error processing render() method of:tree--expand-icon",
    "Error processing render() method of:tree--expand-icon-dark-mode",
    "Error processing render() method of:tree--expand-icon-high-contrast",
    "Error processing render() method of:tree--expand-icon-rtl",
    "Error processing render() method of:tree--flat",
    "Error processing render() method of:tree--flat-dark-mode",
    "Error processing render() method of:tree--flat-high-contrast",
    "Error processing render() method of:tree--flat-rtl",
    "Error processing render() method of:tree--flat-tree-single-selection",
    "Error processing render() method of:tree--flat-tree-single-selection-dark-mode",
    "Error processing render() method of:tree--flat-tree-single-selection-high-contrast",
    "Error processing render() method of:tree--flat-tree-single-selection-rtl",
    "Error processing render() method of:tree--flat-tree-multi-selection",
    "Error processing render() method of:tree--flat-tree-multi-selection-dark-mode",
    "Error processing render() method of:tree--flat-tree-multi-selection-high-contrast",
    "Error processing render() method of:tree--flat-tree-multi-selection-rtl"

Expected Behavior

VR test stories should be processed without issues

Reproduction

https://uifabric.visualstudio.com/fabricpublic/_build/results?buildId=370698&view=logs&j=d896371a-1583-5fe7-db02-473133ed56b2&t=282e32d3-e76c-5609-8d4f-bd5f29091ecb

Steps to reproduce

1. yarn nx run vr-tests-react-components:build-storybook
2. yarn nx run vr-tests-react-components:test-vr
3. see Steps object is undefined within logs

Are you reporting an Accessibility issue?

no

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.