React testing library waitFor is not working


I have a react app using graphql, apollo client, for testing jest, and react-testing-library. So far waitFor worked like a charm, but now it’s not. I tried many things, played around with get/query/find selectors (of rtl), but nothing worked.

Here’s the test:


  test('Abort button is on root requests, when pressed the request is aborted', async () => {
    const { getAllByTestId, getByTestId, findAllByTestId, findByTestId, debug } = setup(mocks);

    await waitFor(async () => {
      const items = await findAllByTestId(/listItem request/);
      return expect(items.length).toBe(3)
    });

    const abortButton = await findByTestId(/abortButton/);
    fireEvent.mouseDown(abortButton)

    await waitFor(async () => {
      const items = await findAllByTestId(/listItem request/);
      return expect(items.length).toBe(0)
    });
  });

Simple enough. It fails at the second waitFor block. Interestingly the test fails as Expected: 0, Received: 3, followed by the proof of that there’s really 0 items matching the criteria:

    <html>
      <head />
      <body>
        <div>
          <div
            class="col height-full width-full appear"
            style="min-height: 0;"
          >
            <div
              class="row gap-s"
            >
              <button
                class="row background-none align-center gap-x-xs color-lightergray "
                data-testid="showOnlyRootCheckbox"
              >
                <svg
                  class="color-main"
                  data-testid="unchecked"
                  fill="currentColor"
                  height="1.5rem"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1.5rem"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    fill="none"
                    height="320"
                    rx="24"
                    ry="24"
                    stroke-linejoin="round"
                    stroke-width="32"
                    width="320"
                    x="96"
                    y="96"
                  />
                </svg>
                Show only root
              </button>
              <button
                class="row background-none align-center gap-x-xs color-lightergray "
                data-testid="showFulfilledCheckbox"
              >
                <svg
                  class="color-main"
                  data-testid="unchecked"
                  fill="currentColor"
                  height="1.5rem"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1.5rem"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    fill="none"
                    height="320"
                    rx="24"
                    ry="24"
                    stroke-linejoin="round"
                    stroke-width="32"
                    width="320"
                    x="96"
                    y="96"
                  />
                </svg>
                Show fulfilled
              </button>
              <button
                class="row background-none align-center gap-x-xs color-lightergray "
                data-testid="showAbortedCheckbox"
              >
                <svg
                  class="color-main"
                  data-testid="unchecked"
                  fill="currentColor"
                  height="1.5rem"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1.5rem"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <rect
                    fill="none"
                    height="320"
                    rx="24"
                    ry="24"
                    stroke-linejoin="round"
                    stroke-width="32"
                    width="320"
                    x="96"
                    y="96"
                  />
                </svg>
                Show aborted
              </button>
            </div>
            <div
              class="col scroll-container rounded-s width-full"
              data-testid="scrollContainer"
            >
              <div
                class="col table margin-left-xl"
              >
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="item header empty"
                  style="grid-row: 1;"
                >
                  Item
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="actions header empty"
                  style="grid-row: 1;"
                >
                  Actions
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="amountNeeded header empty"
                  style="grid-row: 1;"
                >
                  Needed
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="amountInProgress header empty"
                  style="grid-row: 1;"
                >
                  In progress
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="amountReady header empty"
                  style="grid-row: 1;"
                >
                  Ready
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="status header asc"
                  style="grid-row: 1;"
                >
                  Status
                  <div
                    class="row size-xs color-white"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      stroke="currentColor"
                      stroke-width="0"
                      viewBox="0 0 512 512"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M112 268l144 144 144-144M256 392V100"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="48"
                      />
                    </svg>
                  </div>
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="preparedAt header empty"
                  style="grid-row: 1;"
                >
                  Prepared at
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="readyAt header empty"
                  style="grid-row: 1;"
                >
                  Ready at
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="fulfilledAt header empty"
                  style="grid-row: 1;"
                >
                  Fulfilled at
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="abortedAt header empty"
                  style="grid-row: 1;"
                >
                  Aborted at
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="row align-center justify-space-between pointer padding-s sticky color-lightergray background-darkgray"
                  data-testid="createdAt header empty"
                  style="grid-row: 1;"
                >
                  Created at
                  <div
                    class="row size-xs color-white"
                  />
                </div>
                <div
                  class="col "
                  data-testid="requests"
                />
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

However, when I did called debug(getByTestId('requests')) (which is the container of the list items), it really shows 3 list items. So there’s something going on.

I made sure this is the only test running, so other tests can’t affect it accidentally.

No mocks, no fake timers.

Source: React – Stack Overflow

October 22, 2021
Category : News
Tags: jestjs | mocking | react-testing-library | reactjs | testing

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.