1import { RegistryContext, useAtomValue } from "@effect/atom-react";
2import { Atom, AtomRegistry } from "effect/reactivity";
3import { describe, expect, it, vi } from "vite-plus/test";
4
5import { render } from "../../test/render";
6import { revisionedQuery } from "./revisionedQuery";
7
8describe("revisionedQuery in React", () => {
9 it("refetches for a new revision without updating a component during render", async () => {
10 let fetches = 0;
11 const query = Atom.make(() => {
12 fetches += 1;
13 return fetches;
14 }).pipe(Atom.keepAlive);
15 const registry = AtomRegistry.make();
16 function Reader({ revision }: { revision: string }) {
17 return <span>fetch {useAtomValue(revisionedQuery(query, revision))}</span>;
18 }
19 const ui = (revision: string) => (
20 <RegistryContext.Provider value={registry}>
21 <Reader revision={revision} />
22 </RegistryContext.Provider>
23 );
24 using consoleError = vi.spyOn(console, "error");
25 // A bare atom reader: no links or navigation to route.
26 await using screen = await render(ui("mutation-1"), { router: false });
27 await expect.element(screen.getByText("fetch 1")).toBeInTheDocument();
28
29 await screen.rerender(ui("mutation-2"));
30
31 await expect.element(screen.getByText("fetch 2")).toBeInTheDocument();
32 expect(consoleError.mock.calls.map(([message]) => String(message))).not.toContainEqual(
33 expect.stringContaining("Cannot update a component"),
34 );
35 });
36});