"introend" doesn't run when DOM changes are triggered by component prop

[cortopy]

As per https://github.com/testing-library/svelte-testing-library/pull/311, "introend" tests seem to work fine.

However, in this scenario the tests break.

The component is exactly the same, except now show is also a prop. The component can be rendered by either clicking the button, or if the parent changes the exposed variable to true

<script>
  import { blur } from 'svelte/transition';
  export let show = false;
  export let introDone = false;
</script>

<button on:click={() => (show = true)}>Show</button>

{#if show}
  <div in:blur={{ duration: 64 }} on:introend={() => (introDone = true)}>
    {#if introDone}
      <p data-testid="intro-done">Done</p>
    {:else}
      <p data-testid="intro-pending">Pending</p>
    {/if}
  </div>
{/if}

test('on:introend with prop change', async () => {
    const { rerender } = render(Transitioner);
    // at this point the container innerHTML is: <div><button>Show</button> </div>
    rerender({ show: true });
    // at this point the container innerHTML is: <div><button>Show</button> <div><p data-testid="intro-pending">Pending</p></div></div>

    // this expectation is OK
    const pending = screen.getByTestId('intro-pending');
    expect(pending).toBeInTheDocument();

    await waitFor(() => {
      const done = screen.queryByTestId('intro-done');
      // However, this one fails
      expect(done).toBeInTheDocument();
    });
  });

[yanick]

Seems to work for me (check out #333)

only thing I changed was to stick an await on the rerender.

[mcous]

@yanick I agree, this is a bug in @cortopy's test. rerender needs an await or to be used inside act for changes to hit the DOM. I think this issue can be closed

[yanick]

Yup. I left it open in case they'd be a follow-up. But it's been a fortnight, so we can close.