svelte - testing-library を使用してリクエストが失敗した後に要素が削除されないようにするにはどうすればよいですか

Question

私の Svelte アプリケーションでは、svelte-testing-libraryを使用して、特定の API 要求 ( mswを使用) が成功したときに要素が削除されることをテストしようとしていますが、エラーが返されたときは削除されません。

ハッピーパスの確認は簡単です

const el = await screen.findByText(/foo/);
await waitForElementToBeRemoved(el);

しかし、リクエストが失敗したときに要素が削除されていないことを確認する「正しい」方法は何ですか? カスタム setTimeout(...) を追加することもできますが、それは最適なソリューションとは思えません。

アサーションを行う前に、リクエストが完了して処理されたことを簡単に確認する方法はありますか?

Foo.svelte

<script>
  let deleted = false;

  const deleteFoo = () => {
    window
      .fetch(`/foo`, {
        method: 'DELETE',
      })
      .then((res) => {
        if (res.ok) {
          deleted = true;
        }
      });
  };
</script>

{#if !deleted}
  <button on:click={deleteFoo}>delete</button>
{/if}

Foo.spec.js

import {render, fireEvent, waitForElementToBeRemoved} from '@testing-library/svelte';
import {server, rest} from './server';
import Foo from './Foo';

test('button hidden on success', async () => {
  server.use(
    rest.delete('/foo', async (req, res, ctx) => {
      return res(ctx.status(200));
    })
  );
  const {getByText, getByRole} = render(Foo, {});

  const btn = getByText('delete');
  fireEvent.click(btn);

  await waitForElementToBeRemoved(btn);
});

test('button visible on error', async () => {
  server.use(
    rest.delete('/foo', async (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );
  const {getByText, getByRole} = render(Foo, {});

  const btn = getByText('delete');
  fireEvent.click(btn);

  await new Promise((r) => setTimeout(r, 10));
  await getByText('delete');
});