Nx: Jest26 on Node10 fails with 'ReferenceError: globalThis is not defined' with V8 coverage provider

[Lonli-Lokli]

Current Behavior

CodeCoverage on Node 10 fails when coverage provider is v8

Expected Behavior

It should work

Steps to Reproduce

Generate empty angular application with Nx and update jest.config.js

collectCoverage: true,
cooverageProvider: "v8"

Run npm run test

Failure Logs

ng run jestee:test
FAIL apps/jestee/src/app/app.component.spec.ts
● Test suite failed to run

evalmachine.<anonymous>:1
globalThis
^

ReferenceError: globalThis is not defined

  at ../../evalmachine.<anonymous>:1:1

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.752 s
Ran all test suites.

Environment

Node 10
nx : Not Found
@nrwl/angular : 10.2.1
@nrwl/cli : 10.2.1
@nrwl/cypress : 10.2.1
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 10.2.1
@nrwl/linter : Not Found
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 10.2.1
@nrwl/web : Not Found
@nrwl/workspace : 10.2.1
typescript : 3.9.7

[rbroen]

I can confirm this with node 10.19.0. After running npx create-nx-workspace@latest f and installing an angular+nest project, I ran nx test f.
The result is:

> ng run f:test 
 FAIL  apps/f/src/app/app.component.spec.ts
  ● Test suite failed to run

    evalmachine.<anonymous>:1
    globalThis
    ^

    ReferenceError: globalThis is not defined

[Lonli-Lokli]

Might be related to https://github.com/jsdom/jsdom/issues/2795#issuecomment-624460723

[rbroen]

I switched to node 12.18.4 and everything was fine.

[Lonli-Lokli]

@rbroen unfortunately for my project Node10 is the only option right now.

[vsavkin]

@Cammisuli do you think this is an issue with Jest? If that's the case, node 10 users can use an earlier version of Jest, right?

[Lonli-Lokli]

I've created sample with pure angular, jest26 and jest-preset-angular and it works on node10.

[Cammisuli]

From the looks of it this is definitely something in jsdom. The fix they applied doesn't work :(

@Lonli-Lokli there's probably a polyfill that's being added in the sample you have. Can you share it?

[Lonli-Lokli]

@Cammisuli do you need sample with issue (with nrwl) or without (pure angular)?

[Cammisuli]

@Lonli-Lokli the one that's working please.

[Lonli-Lokli]

@Cammisuli here is it https://github.com/Lonli-Lokli/jest-26

[Cammisuli]

Thank you! It looks like it's related to something in @nrwl/jest/plugin/resolver. I'll investigate a bit further.

Yup, it looks like typescript is adding globalThis to the global object..

[Cammisuli]

@Lonli-Lokli here's a solution:
yarn add jest-environment-jsdom-fifteen --dev
Then change your root jest.config.js to have this:

 testEnvironment: "jest-environment-jsdom-fifteen"

That should allow it to work better with Node 10. But we do really recommend that you update to the latest LTS as Node 10 will be EOL next year 😮

[Lonli-Lokli]

@Cammisuli I was going to use v8 coverage, introduced in jest26 with jest-envieonment-jsdom@16. So I believe your proposal will be like use Jest 26 without new enhancements.

Pure angular allows to use it, why is it broken with nrwl?

[Cammisuli]

The v8 coverageProvider was added with v25. It also appears that it's very experimental and even Jest says to use Node 14 to get the best results.

Note that using v8 is considered experimental. This uses V8's builtin code coverage rather than one based on Babel. It is not as well tested, and it has also improved in the last few releases of Node. Using the latest versions of node (v14 at the time of this writing) will yield better results.

Using Jest v26 will still give you the same benefits, but the test environment will be different. You can also use puppeteer as a testEnvironment, right?

As to why it doesn't work well with Nx, is because of the @nrwl/jest/plugin/resolver. We include that so that we can use the tsconfig path mappings (along with handling styles) to find nx projects in a workspace. As soon as TypeScript is imported anywhere, TypeScript will automatically include a globalThis shim. We can't do anything about that unfortunately.

[Lonli-Lokli]

@Cammisuli agree with you now.
I think it'll be good to add some notes to readme or wiki for users on Node 10.
Unfortunately our customer prefer to upgrade in last minute, it was a huge move for them to go up to 10 from Node 8.

[Cammisuli]

Changing the testEnvironment to "jest-environment-jsdom-fifteen" looks like the best solution for handling this situation. If anything else arises, reply to this thread, or open a new issue.

Thank you!

[Lonli-Lokli]

Just FYI, Jest-runner (https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) requires this setting to be added to every project and ignores root-level jest.config.js.

[Cammisuli]

You should be able to add any options into the root jest.preset.js file. As that should be a preset (by default) for all jest projects within Nx.

[Lonli-Lokli]

@Cammisuli it does not work when this option exists in latest (> 10.3) root config, I have to add it to the project configs.