Unstable vite template, adding vitest: error "React Refresh Babel transform should only be enabled in development environment"

[adam1658]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Either a), run the reproduction here: https://github.com/adam1658/remix-unstable-vite-vitest-reproduction,

or follow the below instructions

1. Create a new remix project from unstable-vite template:
   • npx create-remix@latest --template remix-run/remix/templates/unstable-vite.
   • Answer default to all questions.
   • cd my-remix-app
2. Add test deps:
   npm install -D vitest jsdom @testing-library/react
3. Configure vitest
   • vite.config.ts:

      export default defineConfig({
        plugins: [remix(), tsconfigPaths()],
     +  test: { environment: 'jsdom' }
      });

4. Add a test
   • app/demo.test.tsx

     import { render, screen} from '@testing-library/react'
     import { expect, test } from 'vitest';
     
     test('test', () => {
       render(<h1>Helloz</h1>);
     
       expect(screen.getByRole('heading')).toHaveTextContent('Hello');
     });

5. Run tests
   • node_modules/.bin/vitest

Expected Behavior

Tests should run, React Babel transform configured correctly for test environment

Actual Behavior

> node_modules/.bin/vitest
Error: [BABEL] /tmp/my-remix-app/app/demo.test.tsx: React Refresh Babel transform should only be enabled in development environment. Instead, the environment is: "test". If you want to override this check, pass {skipEnvCheck: true} as plugin options. (While processing: "/tmp/my-remix-app/node_modules/react-refresh/babel.js")

It appears that this occurs due to the remix vite plugin including the React Refresh Babel transform when not in production, but the transform complains about being included in prod.

[hi-ogawa]

I think, for the purpose of unit test, it might not be even necessarily to use remix plugin.
So, one workaround could be to disable plugin when running on vitest (cf. https://vitest.dev/config/#configuration) e.g. by

export default defineConfig({
  plugins: [
    !process.env.VITEST && remix(), // filter it out based on VITEST env var
    tsconfigPaths()
  ],
  test: {
    environment: 'jsdom'
  }
});

Vite/Vitest can transform JSX without any plugins like vite-plugin-react (https://github.com/vitejs/vite-plugin-react/), so I think this can be enough for simple cases.

---

Maybe one change which can be done on remix plugin side is that, as indicated by the error message, remix could set {skipEnvCheck: true} here to allowing using remix plugin regardless of environment:

remix/packages/remix-dev/vite/plugin.ts

Line 791 in 903268f

plugins: ["react-refresh/babel"],

For reference, vite-plugin-react seems to be using this option https://github.com/vitejs/vite-plugin-react/blob/639208702582b864dec360e7300e947afba109cd/packages/plugin-react/src/index.ts#L196-L199

[adam1658]

Thanks @hi-ogawa for your solution with process.env.VITEST - I hadn't tested skipping the remix plugin based on my assumption that it was required for JSX transforms, but I'm very pleased to have found out I was wrong. It works well for me with the configuration you've suggested.

[markdalgleish]

I agree that you probably don't want to run the Remix plugin in your tests, but either way, this error message will be suppressed in the next release thanks to #7980.