Open nerdo opened 1 year ago
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
});
});
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 asignal
. When each respective value is set, it is displayed in a<div></div>
.There are tests in
App.test.tsx
is where the issue lies. The test that tests clicking the button that changes the value withuseState
passes, while the one changing the value in a similar way with asignal
fails.To run the tests in the stackblitz, open the terminal and run
vitest
.