[Bug]: Play function throws RangeError testing an emotion styled component

[fabioimpe]

Describe the bug

Adding a play function, even an empty one, to a Story using a component created with @emotion/styled throws the following error:

RangeError: Maximum call stack size exceeded

To Reproduce

Component.tsx

import styled from '@emotion/styled'

export const Component = styled.span`
  background-color: red;
`

Component.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { within } from '@storybook/testing-library'

import { Component } from './Component'

const meta: Meta<typeof Component> = {
  title: 'Component',
  component: Component,
}

type Story = StoryObj<typeof Component>

export const Simple: Story = {
  args: {},
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)
    await step('Should...', async () => {})
  }
}

export default meta

System

System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 9.3.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.3

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[fabioimpe]

@shilman here's the repro

Repo: https://github.com/fabioimpe/storybook-emotion-play-range-error-reproduction Chromatic: https://6435233c179c742c7e0f64c8-nbtfbdppcf.chromatic.com/?path=/story/components-button--simple

I don't know why in Chromatic the error message is not shown, but here's a screenshot of the failing test run: