Ts-jest: Support hoisting when import from @jest/globals

[ahnpnl]

🚀 Feature Proposal

Jest has a new package @jest/globals in v25.5.0 which Jest's globals can be explicitly imported.

The introduction of this new package also led to the change of hoisting in babel-jest plugin. We also need to do the similar thing, referencing Jest PR https://github.com/facebook/jest/pull/9806

Motivation

To make hoisting behavior not different between babel-jest and ts-jest so users won't encounter any issues.

Example

See example in https://github.com/facebook/jest/pull/9806

[ahnpnl]

do you mind picking this up @G-Rath ?

[Xb0X]

Hello !!

I have have an issue which seems related. I'm trying to mock a module :

jest.mock('react-lazy-load-image-component', () => ({
  ...jest.requireActual('react-lazy-load-image-component'),
  // eslint-disable-next-line react/prop-types,react/react-in-jsx-scope
  LazyLoadComponent: ({ children }: LazyMockProps) => <>{children}</>,
}));

But then I have this error message :

ReferenceError: /git/zephyr/packages/ui/src/atoms/BlurryImage/BlurryImage.test.tsx: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: React
    Whitelisted objects: Array, ArrayBuffer, Atomics, BigInt, BigInt64Array, BigUint64Array, Boolean, Buffer, DataView, Date, Error, EvalError, Float32Array, Float64Array, Function, GLOBAL, Generator, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, NaN, Number, Object, Promise, Proxy, RangeError, ReferenceError, Reflect, RegExp, Set, SharedArrayBuffer, String, Symbol, SyntaxError, TextDecoder, TextEncoder, TypeError, URIError, URL, URLSearchParams, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, WeakMap, WeakSet, WebAssembly, arguments, clearImmediate, clearInterval, clearTimeout, console, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, escape, eval, expect, global, globalThis, isFinite, isNaN, jest, parseFloat, parseInt, process, queueMicrotask, require, root, setImmediate, setInterval, setTimeout, undefined, unescape.
    Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.

      2 |     ...jest.requireActual('react-lazy-load-image-component'),
      3 |     // eslint-disable-next-line react/prop-types,react/react-in-jsx-scope
    > 4 |     LazyLoadComponent: ({ children }) => React.createElement(React.Fragment, null, children),
        |                                          ^^^^^
      5 | }));
      6 | import React from 'react';
      7 | import { mocked } from 'ts-jest/utils';

      at File.buildCodeFrameError (../../node_modules/babel-jest/node_modules/@babel/core/lib/transformation/file/file.js:267:12)

Do you think guys it can be related ? :)

Many thx !!

[ahnpnl]

if you import anything from @jest/globals in your codes, most likely you will have an issue with hoisting.

@Xb0X Your issue is reported here https://github.com/facebook/jest/issues/10218, it's related to babel-plugin-jest-hoist