storybookjs / testing-library

Instrumented version of Testing Library for Storybook Interactions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug] Error while navigating through a failing interaction test using jest-dom helpers

patricklafrance opened this issue · comments

Describe the bug

When my test fail and I navigate through the steps with Storybook interactions addon I keep getting the following error:

image

I know jest-dom helpers are available since some steps are executed successfully and the error message in the addon match toHaveAttribute() error message output:

image

I get the error only while navigating through the steps:

image

image

This is a fresh install with latest CRA and Storybook:

"@storybook/jest": "^0.0.10"
"@storybook/react": "^6.5.12"
"@storybook/test-runner": "^0.7.2"
"@storybook/testing-library": "^0.0.13"
"jest": "29.1.1",

Any idea what could be the issue?

Steps to reproduce the behavior

Here's the test code

export const SpacebarKeypressTogglesContentVisibility = () => (
    <Disclosure>
        <Button data-testid="header">Header</Button>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Disclosure>
)
SpacebarKeypressTogglesContentVisibility.play = async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const header = await waitFor(() => canvas.getByTestId("header"));

    expect(header).toHaveAttribute("aria-expanded", "false");

    fireEvent.keyDown(canvas.getByTestId("header"), { key: Keys.space });

    await waitFor(() => expect(header).toHaveAttribute("aria-expanded", "true"));

    fireEvent.keyDown(canvas.getByTestId("header"), { key: Keys.space });

    await waitFor(() => expect(header).toHaveAttribute("aria-expanded", "false"));
}

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

  • OS: Windows
  • Node.js version: v16.14.0
  • NPM version: [e.g. 6.14.4]
  • Browser (if applicable): [e.g. chrome, safari]
  • Browser version (if applicable): [e.g. 22]
  • Device (if applicable): [e.g. iPhone6]

Additional context

Add any other context about the problem here.