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

Support hoisting when import from @jest/globals #1593

Closed
ahnpnl opened this issue May 4, 2020 · 3 comments · Fixed by #1937
Closed

Support hoisting when import from @jest/globals #1593

ahnpnl opened this issue May 4, 2020 · 3 comments · Fixed by #1937
Labels

Comments

@ahnpnl
Copy link
Collaborator

ahnpnl commented May 4, 2020

🚀 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 jestjs/jest#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 jestjs/jest#9806

@ahnpnl ahnpnl added the 🚀 Feature Request new suggested feature label May 4, 2020
@ahnpnl
Copy link
Collaborator Author

ahnpnl commented May 4, 2020

do you mind picking this up @G-Rath ?

@ahnpnl ahnpnl changed the title Support hoisting when import from @jest/global Support hoisting when import from @jest/global May 4, 2020
@ahnpnl ahnpnl changed the title Support hoisting when import from @jest/global Support hoisting when import from @jest/globals May 4, 2020
@ahnpnl ahnpnl pinned this issue May 19, 2020
@Xb0X
Copy link

Xb0X commented Jun 2, 2020

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
Copy link
Collaborator Author

ahnpnl commented Jun 2, 2020

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 jestjs/jest#10218, it's related to babel-plugin-jest-hoist

ahnpnl added a commit that referenced this issue Sep 10, 2020
Support hoisting when using `@jest/globals`, applying to:

- named import, e.g. `import { jest } from '@jest/globals'`

- aliased named import, e.g. `import {jest as aliasedJest} from '@jest/globals'`

- namespace import, e.g `import * as JestGlobals from '@jest/globals'`

Closes #1593
@ahnpnl ahnpnl unpinned this issue Sep 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@ahnpnl @Xb0X and others