Open amanape opened 7 months ago
It ran into the same error too while trying to run react component tests
I am also having this exact error.
Any update on this ?
@martialanouman
The only (temporary) solution I found was to separate vitest.config.ts and vite.config.ts, then everything works as expected. But that is not a good solution as according to the official documentation, overrides the vite file.
Thanks @amanape
I saw that and use it for now, but that doesn't feel clean
Currently we recommend that the remix
plugin is omitted when running with Vitest.
There's a bit of work to do on our end to figure out how best to integrate with tools like Vitest and Storybook so that this sort of workaround isn't required.
If I did the conditional logic of process.env.VITEST && remix()
I would get a new error in some of my tests:
ReferenceError: React is not defined
If you were on a Vite React SPA previously, I'm finding that you would need to keep your @vitejs/plugin-react
around just for vitest:
import reactVitest from '@vitejs/plugin-react'
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig, loadEnv } from "vite";
export default defineConfig({
plugins: [process.env.VITEST ? reactVitest() : remix()],
// rest of the config
});
Currently we recommend that the
remix
plugin is omitted when running with Vitest. There's a bit of work to do on our end to figure out how best to integrate with tools like Vitest and Storybook so that this sort of workaround isn't required.
This generally works well, but I'm facing some issues when trying to test remix routes using @remix-run/testing
. Basically, no matter what I pass, when rendering the RemixStub
, it always results in a 404 error page.
Could that be a side effect of not loading the remix vite plugin while running tests with vite?
Currently we recommend that the
remix
plugin is omitted when running with Vitest. There's a bit of work to do on our end to figure out how best to integrate with tools like Vitest and Storybook so that this sort of workaround isn't required.This generally works well, but I'm facing some issues when trying to test remix routes using
@remix-run/testing
. Basically, no matter what I pass, when rendering theRemixStub
, it always results in a 404 error page.Could that be a side effect of not loading the remix vite plugin while running tests with vite?
Currently facing the same issue. The "Remix Vite plugin can't detect preamble. Something is wrong." was solved. However now my tests using createRemixStub
always render 404 error page which makes them fail.
Any solution?
I am running into this exact error with a fresh remix app which attempts to use vitest with jsdom. I have another project which uses React Router which I want to port over to remix. While the app works, the tests cannot due to this issue and I am blocked.
This will fix the issue
import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vite";
installGlobals();
const MODE = process.env.NODE_ENV;
export default defineConfig({
build: {
cssMinify: MODE === "production",
rollupOptions: {
external: [/node:.*/, "stream", "crypto", "fsevents"],
},
},
server: {
watch: {
ignored: ["**/playwright-report/**"],
},
},
plugins: [
process.env.NODE_ENV === "test"
? null
: remix({
ignoredRouteFiles: ["**/*.css"],
}),
tsconfigPaths(),
],
test: {
include: ["**/__tests__/**.{js,jsx,ts,tsx}"],
environment: "jsdom",
setupFiles: ["./tests/setup/setup-tests-env.ts"],
restoreMocks: true,
coverage: {
exclude: ["**/__tests__/**"],
include: ["app/**/*.{ts,tsx}"],
all: true,
},
alias: {
"~": "/app",
},
},
});
This is a typical config file
plugins: [
process.env.NODE_ENV === "test"
? null
: remix({
ignoredRouteFiles: ["**/*.css"],
}),
tsconfigPaths(),
],
Reproduction
Go to https://stackblitz.com/edit/remix-run-remix-b7fgeb?file=__tests__%2Fexample.spec.tsx and run
npx vitest
to see the error.Regular unit tests run fine, problem appeared when integrating component testing with
@testing-library/react
(which in turn required me to installhappy-dom
orjsdom
for the testing environment).Defining the components inside the test do not cause an error.
I was able to trace the issue to the
vite.config.ts
file, where including any configurations related tovitest
will cause it to fail. Moving thevitest
configurations tovitest.config.ts
and merging the two configuration files as advised by the official documentation also causes the same error.Temporary Solution
The only (temporary) solution I found was to separate
vitest.config.ts
andvite.config.ts
, then everything works as expected. But that is not a good solution as according to the official documentation, overrides the vite file.System Info
Used Package Manager
npm
Expected Behavior
Tests should work as expecting without throwing
Actual Behavior
Test fail because of reasons unrelated to tests