Skip to content

[Bug]: Jest tests fail when rendering dialog #29703

@15MariamS

Description

@15MariamS

Library

React Components v9 (@fluentui/react-components)

System Info

System:
    OS: macOS 13.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 28.18 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 16.5.2

Are you reporting Accessibility issue?

no

Reproduction

NA

Bug Description

Actual Behavior

Jest tests are failing when rendering a dialog on version 9.37.0. I've been able to manually advance the screen state by using await waitFor... or jest.runOnlyPendingTimers(); on some of my tests, but others are unable to advance the state to show the dialog.

My hunch is that it has something to do with the animation delaying the tests.

Expected Behavior

Tests pass

Logs

expect(element).toBeVisible()

    Received element is not visible:
      <span class="css-110" style="margin-bottom: 4px; font-size: 24px; font-weight: 800;" />

      67 |   renderWithContexts(<TestDialog isOpen={true} onDismiss={dismissMock} />);
      68 |
    > 69 |   expect(screen.getByText("Testing Dialog")).toBeVisible();
         |                                                    ^
      70 |   expect(screen.getByLabelText("Analyze")).toBeDisabled();
      71 |
      72 |   responsePromise.resolve(undefined);

      at Object.toBeVisible (__tests__/taskpane/react/TestDialog.test.tsx:69:52)

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions