Analytical table unit testing with Vitest

[eranga93]

It's unable to render the header & body content of the Analytical table component on test environment using Vitest & JsDom. These are not shadow dom content as well. Below is what rendered on the test env,

        render(
            <AnalyticalTable
                columns={[
                    {
                        Header: 'Name',
                        accessor: 'name',
                    },
                    {
                        Header: 'Age',
                        accessor: 'age',
                    },
                    {
                        Header: 'Friend Name',
                        accessor: 'friend.name',
                    },
                    {
                        Header: 'Friend Age',
                        accessor: 'friend.age',
                    },
                ]}
                data={[
                    {
                        age: 45,
                        friend: {
                            age: 47,
                            name: 'Tiffany Best',
                        },
                        name: 'Swanson Graham',
                        status: 'Critical',
                    },
                ]}
            />
        )
        expect(screen.getByText('1')).toBeTruthy()

  <ui5-announcement-area>
    <span
      aria-live="polite"
      class="ui5-invisiblemessage-polite"
      role="alert"
      style="position: absolute; clip: rect(1px, 1px, 1px, 1px); user-select: none; left: -1000px; top: -1000px; pointer-events: none;"
    />
    <span
      aria-live="assertive"
      class="ui5-invisiblemessage-assertive"
      role="alert"
      style="position: absolute; clip: rect(1px, 1px, 1px, 1px); user-select: none; left: -1000px; top: -1000px; pointer-events: none;"
    />
  </ui5-announcement-area>
  <div>
    <div
      data-testid="roots-team-table"
      style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; --_ui5wcr-AnalyticalTableHeaderRowHeight: 100px; visibility: hidden;"
    >
      <div
        id="titlebar-:r0:"
        style="min-height: 1.5rem; display: flex; align-items: center;"
      >
        <ui5-title
          level="H2"
          size="H5"
          ui5-title=""
          wrapping-type="Normal"
        >
          Decision Table
        </ui5-title>
      </div>
      <div
        class="_flexBox_11fgm_1 _flexBoxDirectionRow_11fgm_66 _justifyContentStart_11fgm_11 _alignItemsStretch_11fgm_45 _flexWrapNoWrap_11fgm_74 _tableContainerWithScrollBar_1rgrg_40"
        data-component-name="AnalyticalTableContainerWithScrollbar"
      >
        <div
          aria-colcount="4"
          aria-labelledby="titlebar-:r0:"
          aria-multiselectable="false"
          aria-rowcount="1"
          class="_table_1rgrg_15"
          data-component-name="AnalyticalTableContainer"
          data-per-page="15"
          role="grid"
          tabindex="0"
        >
          <div
            class="_tableHeaderBackgroundElement_1rgrg_82"
          />
          <div
            class="_tableBodyBackgroundElement_1rgrg_92"
          />
          <div
            class="_tableHeaderRow_1rgrg_64"
            data-component-name="AnalyticalTableHeaderRow"
            role="row"
            style="width: 320px;"
          />
          <div
            class="_tbody_1rgrg_139"
            data-component-name="AnalyticalTableBody"
            style="position: relative; overflow-y: auto; height: 44px; width: 320px;"
          >
            <div
              data-component-name="AnalyticalTableBodyScrollableContainer"
              style="position: relative; height: 44px; width: 320px;"
            />
          </div>
        </div>
      </div>
    </div>
    <ui5-text
      aria-hidden="true"
      class="_hiddenSmartColMeasure_1rgrg_312"
      data-component-name="AnalyticalTableScaleModeHelper"
      id="scaleModeHelper-:r0:"
      ui5-text=""
    />
    <ui5-text
      aria-hidden="true"
      class="_hiddenSmartColMeasure_1rgrg_312 _hiddenSmartColMeasureHeader_1rgrg_319"
      data-component-name="AnalyticalTableScaleModeHelperHeader"
      id="scaleModeHelperHeader-:r0:"
      ui5-text=""
    />
  </div>
</body>

Is there something I have missed to provide or Do you have any example for testing with Vitest?

[Lukas742]

Hi @eranga93

we don't recommend testing frameworks using JSDOM, as the web component support is still limited and many browser features are not available there. So, mocking or polyfilling the missing APIs is often required.
We recommend Cypress instead, since it's using a real browser for testing and therefore all standard features are available there as well.

To help you with your specific issue, please give more context preferably by creating an isolated example of the issue.