[browser] Allow dynamic `process.env` in browser mode

[JCQuintas]

Clear and concise description of the problem

Currently process.env.NODE_ENV gets replaced by its actual value when vitest is run in browser mode.

This behaviour defeats some parts of component testing, when we want to actually test the behaviour of our component in different environments. Eg: by throwing in development vs warning in production.

Suggested solution

Allow process.env to be dynamic in browser mode

Alternative

No response

Additional context

If you need a quick testing example 🙃 https://github.com/JCQuintas/vitest-browser-process-env

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

process.env doesn't exist in the browser, so I don't think it is reasonable to polyfill it since it will introduce the difference between the production and development environments.

We could play around with it by replacing it with something like __global_process_env__ and override it in vi.stubEnv or import.meta.env.NODE_ENV

[JCQuintas]

process.env already works in vitest browser mode. The issue seems to be that the builder/bundler parses process.env.NODE_ENV of the components to "production" when it runs.

If we destructure the variable and use it instead, then the tests in the example start working.

  const { NODE_ENV } = process.env;
  if (NODE_ENV === 'production') {
    throw new Error('This is a production error');
  }

[sheremet-va]

process.env already works in vitest browser mode.

Yeah, and it's a bug: https://github.com/vitest-dev/vitest/issues/6203

The issue seems to be that the builder/bundler parses process.env.NODE_ENV of the components to "production" when it runs

This is just how Vite works; we can bypass it by transforming it to a different variable first.