Unable to assert change to UI with testing library when a signal triggers the change

[nerdo]

I ran into what appears to be a bug when using testing library and a simple signal.

Here's a stackblitz setup illustrating the issue: https://stackblitz.com/edit/vitejs-vite-adbvfx?file=src%2FApp.tsx,src%2FApp.test.tsx&terminal=dev

Each button simply triggers a function that sets a string. One does it using useState, and the other does it with a signal. When each respective value is set, it is displayed in a <div></div>.

There are tests inApp.test.tsx is where the issue lies. The test that tests clicking the button that changes the value with useState passes, while the one changing the value in a similar way with a signal fails.

To run the tests in the stackblitz, open the terminal and run vitest.

[mfal]

You can workaround this issue by testing your expectations inside the waitFor function.

import React from "react";
import { expect, test } from "vitest";
import { render, waitFor } from "@testing-library/react";

test("Renders as expected", async () => {
  render(
    <ComponentUsingSignals />,
  );

  await waitFor(() => {
    // expectations
  });
});