-
-
Notifications
You must be signed in to change notification settings - Fork 113
test: migrate react tests to vitest #716
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: vitest-migration
Are you sure you want to change the base?
Conversation
|
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 karma will have been bundling and stubbing these out before. it may be that we have to tell vitest to bundle babel somehow |
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 👀 |
@JoviDeCroock im a bit stuck with whats up with these runtime tests in 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? |
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 |
you're right it doesn't happen for the update it smells of some problem with using i have to do some sketchy things like setting |
expect(cleanup).not.toHaveBeenCalled(); | ||
expect(spy).toHaveBeenCalledOnce(); | ||
expect(spy).toHaveBeenCalledWith("foo", scratch.firstElementChild, "0"); | ||
spy.mockClear(); | ||
|
||
await act(() => { | ||
sig.value = "bar"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
i'm very stuck on this unfortunately i have no idea why signal value mutations don't happen i assumed it'd be because the signals react transform isn't running, so i added it to the vitest config as a babel plugin. but that doesn't seem to help either i tried injecting the global helper we have too, and no luck i don't know enough about what makes signal value mutations do their job to be able to fix this i think something somewhere in this repo exists to make |
The main thing that's making it cause rerenders is the I can try to be more useful tomorrow 😅 I'm probably out all weekend |
i figured it out! before, we were using a babel plugin inside karma to transform tests with the signals react transform now, vitest uses esbuild/rollup. so i added an equivalent vitest (rollup) plugin to do the same, but it still wasn't working. then it turned out its because the plugin runs after the base ones vitest provides, i.e. the JSX was already transpiled so our transform never saw any JSX elements. setting all good now by the looks, but i really hate this babel-using-rollup-vite-plugin 😅 would love to get rid of it somehow |
finally got a passing test run! when if i point at the minified code, i get all sorts of errors trying to render mangled keys, but these don't seem to be anything to do with the mangle plugin we have. so edit: the last remaining test is the react 16 stuff, since it seems vite will try resolve the i suppose we need to tell vite not to check it somehow |
No description provided.