test: migrate react tests to vitest

[43081j]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0e2f613

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[43081j]

since we changed a file that the transform tests also depend on, we need to do both in one PR

so this won't build yet until i do that

the transform e2e tests are also a bit wonky. they depend on babel (which only runs in node), but the tests are written as browser tests. in vitest this just errors since babel tries to use things like process

karma will have been bundling and stubbing these out before. it may be that we have to tell vitest to bundle babel somehow

[43081j]

the tests are intertwined enough that im just going to do the rest in this PR all in one go

so it'll be a somewhat big PR but at least once its done, its all done 👀

[43081j]

@JoviDeCroock im a bit stuck with whats up with these runtime tests

in packages/react/test/shared/updates.tsx, we have a test like this:

const sig = signal("foo");
function App() {
  const value = sig.value;
  return <p>{value}</p>;
}

await render(<App />);

expect(scratch.textContent).to.equal("foo");

await act(() => { sig.value = "bar"; });

expect(scratch.textContent).to.equal("bar");

this doesn't pass because the content remains as "foo".

if we change it to this:

function App() {
  // pass the signal itself, not the {value}
  return <p>{sig}</p>;
}

it then passes

any idea whats happening there?

[JoviDeCroock]

When we access .value we rely on the preact render cycle while with the other we rely on a direct text node update.

My assumption would be that the rerender doesn't happen. Verifyable by adding a console log to the function body.

Edit: oh wait this is react, similar thing only that we always rely on the render cycle. The textNode is a specialised component tho, still worth adding the log to verify

[43081j]

you're right it doesn't happen for the update

it smells of some problem with using act in a real browser but im not sure why

i have to do some sketchy things like setting IS_REACT_ACT_ENVIRONMENT to trick it into doing its job 😅

[43081j]

this currently doesn't trigger a render for whatever reason and is why the tests fail right now

the callback is called, but sig.value assignment doesn't appear to do anything