Skip to content
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

Error when using process.env.NODE_ENV with jsdom and @vitest/coverage-istanbul #3860

Closed
6 tasks done
devpeerapong opened this issue Aug 2, 2023 · 7 comments · Fixed by #3957 · May be fixed by #3899
Closed
6 tasks done

Error when using process.env.NODE_ENV with jsdom and @vitest/coverage-istanbul #3860

devpeerapong opened this issue Aug 2, 2023 · 7 comments · Fixed by #3957 · May be fixed by #3899
Labels
feat: coverage Issues and PRs related to the coverage feature mode: web

Comments

@devpeerapong
Copy link

devpeerapong commented Aug 2, 2023

Describe the bug

When running vitest with coverage @vitest/coverage-istanbul and jsdom
If the code is using the process.env.NODE_ENV, it will throw this error.

FAIL  index.test.ts [ index.test.ts ]
Error: Parse failure: Unexpected token (30:59)
At file: /env.ts
Contents of line 30:       sourcesContent: ["export const env = {\n  NODE_ENV: "test",\n};\n"],

In this error, you can see that the double quote of the process.env.NODE_ENV is not escaped.

This error is gone after we remove the jsdom from the test environment.

I try it with v0.33 and there's no error.

Reproduction

here's the minimal reproduction https://github.com/devpeerapong/vitest-034-jsdom-coverage-bug

  1. install vitest, jsdom, @vitest/coverage-istanbul
  2. create vitest.config.test with this configuration
import { UserConfigExport, defineConfig } from "vitest/config";

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    environment: "jsdom",
    coverage: { provider: "istanbul" },
  },
} as UserConfigExport);
  1. create index.ts
export function getNodeEnv() {
  return process.env.NODE_ENV;
}
  1. create indext.test.ts
import { test, expect } from "vitest";
import { getNodeEnv } from "./index";

test("getNodeEnv() should return test", () => {
  expect(getNodeEnv()).toBe("test");
});
  1. Run vitest --coverage. You will see the error.

*If you comment out the environment: "jsdom" in vitest.config.ts or downgrade vitest to v0.33, it will work.

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 138.20 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.17.0 - ~/Library/Caches/fnm_multishells/3207_1690965709901/bin/node
    Yarn: 3.2.1 - ~/Library/Caches/fnm_multishells/3207_1690965709901/bin/yarn
    npm: 9.6.7 - ~/Library/Caches/fnm_multishells/3207_1690965709901/bin/npm
    pnpm: 8.6.9 - ~/Library/Caches/fnm_multishells/3207_1690965709901/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.6
  npmPackages:
    @vitejs/plugin-react: ^4.0.4 => 4.0.4 
    @vitest/coverage-istanbul: ^0.34.1 => 0.34.1 
    vitest: ^0.34.1 => 0.34.1

Used Package Manager

pnpm

Validations

@devpeerapong devpeerapong changed the title Error when using process.env.NODE_ENV jsdom with @vitest/coverage-istanbul Error when using process.env.NODE_ENV with jsdom and @vitest/coverage-istanbul Aug 2, 2023
@AriPerkkio
Copy link
Member

AriPerkkio commented Aug 3, 2023

Istanbul instrumented code contains the source map where process.env is in sourcesContent:

function cov_zu6h2qi9v() {
  var coverageData = {
    path: "/x/vitest/test/coverage-test/src/process-env.ts",
    branchMap: { },
    inputSourceMap: {
      sourcesContent: ["export function getNodeEnv() {\n  return process.env.NODE_ENV\n}\n"],
      // ...
    },
  }
}

cov_zu6h2qi9v();
export function getNodeEnv() {
  cov_zu6h2qi9v().f[0]++;
  cov_zu6h2qi9v().s[0]++;
  return "test";
}

When process.env is replaced, it injects double quotes to string which breaks the JS object.

  inputSourceMap: {
-    sourcesContent: ["export function getNodeEnv() {\n  return process.env.NODE_ENV\n}\n"],
+    sourcesContent: ["export function getNodeEnv() {\n  return "test"\n}\n"],

@AriPerkkio
Copy link
Member

This bug was introduced by #3491.

@sheremet-va
Copy link
Member

sheremet-va commented Aug 3, 2023

This bug was introduced by #3491.

Yes, process.env.NODE_ENV is always replaced by Vite when ssr: false. This is intentional change, we just need to find a workaround.

@AriPerkkio
Copy link
Member

we just need to find a workaround

As the sourcesContent contains all source code in a single line, I think we could replace all process.env's from that line with regexp after instrumenting that file. And before remapping the coverage results back to sources, change it back.

@AriPerkkio AriPerkkio added the feat: coverage Issues and PRs related to the coverage feature label Aug 6, 2023
@fireairforce
Copy link

meet the same problem when i upgrade from 0.29.1 to 0.33.0..

@alexvarney
Copy link

This isn't a proper fix, but the best solution I've found to resolve this issue right now is to add all your process.env references to a single config file that re-exports the values, and then add that file to the excluded test files in vite.config.ts.

@AriPerkkio
Copy link
Member

Updating Vitest to 0.34.2 should fix this.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: coverage Issues and PRs related to the coverage feature mode: web
Projects
None yet
5 participants