Web tests are failing on `main`

[tyler-dane]

Where did this happen?

Local code with an up-to-date main branch

Expected Behavior

All tests pass

Current Behavior

Calendar render test is failing to find an element

Summary of all failing tests
 FAIL  packages/web/src/__tests__/Calendar/calendar.render.test.tsx
  ● Calendar: Display with State › displays timed events

    TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/groceries/i`

    Here are the accessible roles:

      complementary:

      Name "":
      <div
        class="Flex__Styled-sc-wg7y35-0 Sidebar__SidebarContainer-sc-yj3slp-6 urUyK ciLKxg"
        id="sidebar"
        role="complementary"
      />

      --------------------------------------------------
      heading:

      Name "This Week":
      <span
        class="Text__StyledText-sc-ey3byl-0 jIDclp"
        role="heading"
      />

      Name "This Month":
      <span
        class="Text__StyledText-sc-ey3byl-0 jIDclp"
        role="heading"
      />

      Name "June 2025":
      <div
        aria-level="1"
        class="Flex__Styled-sc-wg7y35-0 Header__StyledHeaderLabel-sc-1ultvwp-3 urUyK hZrZuC"
        role="heading"
      />

      --------------------------------------------------
      button:

      Name "Takeover world < >":
      <div
        aria-describedby="rfd-hidden-text-:r2e:-hidden-text-:r2f:"
        class="SomedayEvent__StyledNewSomedayEvent-sc-h8zj8t-0 gvYepD"
        data-event-id="somedayFoo"
        data-rfd-drag-handle-context-id=":r2e:"
        data-rfd-drag-handle-draggable-id="somedayFoo"
        data-rfd-draggable-context-id=":r2e:"
        data-rfd-draggable-id="somedayFoo"
        draggable="false"
        role="button"
        tabindex="0"
      />

      Name "<":
      <span
        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
        role="button"
        title="Migrate to previous week"
      />

      Name ">":
      <span
        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
        role="button"
        title="Migrate to next week"
      />

      Name "Europe Trip < >":
      <div
        aria-describedby="rfd-hidden-text-:r2e:-hidden-text-:r2f:"
        class="SomedayEvent__StyledNewSomedayEvent-sc-h8zj8t-0 gRldqF"
        data-event-id="6262d2840138892cb743444a"
        data-rfd-drag-handle-context-id=":r2e:"
        data-rfd-drag-handle-draggable-id="6262d2840138892cb743444a"
        data-rfd-draggable-context-id=":r2e:"
        data-rfd-draggable-id="6262d2840138892cb743444a"
        draggable="false"
        role="button"
        tabindex="0"
      />

      Name "<":
      <span
        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
        role="button"
        title="Migrate to previous week"
      />

      Name ">":
      <span
        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
        role="button"
        title="Migrate to next week"
      />

      Name "+":
      <div
        data-state="closed"
        role="button"
      />

      Name "+":
      <div
        data-state="closed"
        role="button"
      />

      Name "":
      <div
        data-state="closed"
        role="button"
      />

      Name "":
      <div
        data-state="closed"
        role="button"
      />

      Name "":
      <div
        data-state="closed"
        role="button"
      />

      Name "":
      <div
        data-state="closed"
        role="button"
      />

      Name "Today":
      <div
        data-state="closed"
        role="button"
      />

      Name "<":
      <div
        data-state="closed"
        role="button"
      />

      Name ">":
      <div
        data-state="closed"
        role="button"
      />

      --------------------------------------------------
      separator:

      Name "sidebar divider":
      <div
        class="Divider__StyledDivider-sc-1uhy3f0-0 fgNDAG"
        color="hsl(219 18 34 / 20%)"
        role="separator"
        title="sidebar divider"
      />

      Name "now line":
      <div
        class="NowLine__StyledNowLine-sc-1sabg51-0 bZKDHq"
        role="separator"
        title="now line"
        width="100"
      />

      --------------------------------------------------
      navigation:

      Name "previous week":
      <span
        class="Text__StyledText-sc-ey3byl-0 Header__ArrowNavigationButton-sc-1ultvwp-6 gPJXrA bAvgWW"
        cursor="pointer"
        role="navigation"
        title="previous week"
      />

      Name "next week":
      <span
        class="Text__StyledText-sc-ey3byl-0 Header__ArrowNavigationButton-sc-1ultvwp-6 gPJXrA bAvgWW"
        cursor="pointer"
        role="navigation"
        title="next week"
      />

      --------------------------------------------------

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="Flex__Styled-sc-wg7y35-0 Calendar__Styled-sc-idzewu-0 urUyK hdgoCo"
          id="cal"
        >
          <div />
          <div
            id="sidebar-context-menu"
            style="display: contents;"
          >
            <div
              class="Flex__Styled-sc-wg7y35-0 Sidebar__SidebarContainer-sc-yj3slp-6 urUyK ciLKxg"
              id="sidebar"
              role="complementary"
            >
              <div
                class="Sidebar__SidebarTabContainer-sc-yj3slp-7 eUeidk"
              >
                <div
                  class="SomedayTab__SidebarContent-sc-1l81kg1-1 bkUDDJ"
                >
                  <div
                    class="Flex__Styled-sc-wg7y35-0 SomedayTab__SidebarSection-sc-1l81kg1-5 urUyK ieSVME"
                  >
                    <div
                      class="Flex__Styled-sc-wg7y35-0 SomedayTab__SidebarHeader-sc-1l81kg1-4 imqFku fFOaiG"
                    >
                      <span
                        class="Text__StyledText-sc-ey3byl-0 jIDclp"
                        role="heading"
                      >
                        This Week
                      </span>
                    </div>
                    <div
                      class="Sidebar__SidebarList-sc-yj3slp-8 cDXXXw"
                    >
                      <div>
                        <div
                          id="somedayColumn"
                        >
                          <div
                            data-rfd-droppable-context-id=":r2e:"
                            data-rfd-droppable-id="weekEvents"
                          >
                            <div>
                              <div
                                aria-describedby="rfd-hidden-text-:r2e:-hidden-text-:r2f:"
                                class="SomedayEvent__StyledNewSomedayEvent-sc-h8zj8t-0 gvYepD"
                                data-event-id="somedayFoo"
                                data-rfd-drag-handle-context-id=":r2e:"
                                data-rfd-drag-handle-draggable-id="somedayFoo"
                                data-rfd-draggable-context-id=":r2e:"
                                data-rfd-draggable-id="somedayFoo"
                                draggable="false"
                                role="button"
                                tabindex="0"
                              >
                                <div>
                                  <div
                                    class="Flex__Styled-sc-wg7y35-0 imqFku"
                                    direction="row"
                                  >
                                    <span
                                      class="Text__StyledText-sc-ey3byl-0 doIWGZ"
                                    >
                                      Takeover world
                                    </span>
                                    <div
                                      class="Flex__Styled-sc-wg7y35-0 urUyK"
                                    >
                                      <span
                                        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
                                        role="button"
                                        title="Migrate to previous week"
                                      >
                                        &lt;
                                      </span>
                                      <span
                                        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"
                                        role="button"
                                        title="Migrate to next week"
                                      >
                                        &gt;
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div>
                              <div
                                aria-describedby="rfd-hidden-text-:r2e:-hidden-text-:r2f:"
                                class="SomedayEvent__StyledNewSomedayEvent-sc-h8zj8t-0 gRldqF"
                                data-event-id="6262d2840138892cb743444a"
                                data-rfd-drag-handle-context-id=":r2e:"
                                data-rfd-drag-handle-draggable-id="6262d2840138892cb743444a"
                                data-rfd-draggable-context-id=":r2e:"
                                data-rfd-draggable-id="6262d2840138892cb743444a"
                                draggable="false"
                                role="button"
                                tabindex="0"
                              >
                                <div>
                                  <div
                                    class="Flex__Styled-sc-wg7y35-0 imqFku"
                                    direction="row"
                                  >
                                    <span
                                      class="Text__StyledText-sc-ey3byl-0 doIWGZ"
                                    >
                                      Europe Trip
                                    </span>
                                    <div
                                      class="Flex__Styled-sc-wg7y35-0 urUyK"
                                    >
                                      <span
                                        class="SomedayEventContainer__StyledMigrateArrow-sc-y2rrfd-0 cXqFMt"


      67 |     });
      68 |     expect(
    > 69 |       screen.getByRole("button", { name: /groceries/i }),
         |              ^
      70 |     ).toBeInTheDocument();
      71 |
      72 |     //   expect(

      at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
      at Object.getByRole (packages/web/src/__tests__/Calendar/calendar.render.test.tsx:69:14)


Test Suites: 1 failed, 27 passed, 28 total
Tests:       1 failed, 142 passed, 143 total
Snapshots:   0 total

Steps to Reproduce

Run: yarn test

Possible Solution

No response

Context

This is causing CI to fail for all feature branches, making it difficult to QA new work

[that-one-arab]

That's a weird one I was sure I resolved it in one of the commits in #471

Probably relates to something I did

I am already aware of this and will work on producing a fix.

[that-one-arab]

@tyler-dane I will unassign you since it is probably something I did means I have more context on what the issue could be

[tyler-dane]

OK. I started to make some progress on this on #485. Since you're picking this up, I'll leave that as-is for reference and work on other stuff in the meantime.