bug: Error in mockIonicReact: "Invalid variable access: react_1"

[zrev2220]

My setupTests.ts file looks like this:

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
import { mockIonicReact } from '@ionic/react-test-utils';
mockIonicReact();

Nothing too fancy going on there, mainly just added mockIonicReact(). But when I upgraded to version ^0.1.1, all tests are now failing with this error message:

  ● Test suite failed to run

    ReferenceError: <REDACTED>\node_modules\@ionic\react-test-utils\dist\mocks\mockIonicReact.js: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: react_1
    Allowed objects: AbortController, AbortSignal, AggregateError, Array, ArrayBuffer, Atomics, BigInt, BigInt64Array, BigUint64Array, Boolean, Buffer, DataView, Date, Error, EvalError, Event, EventTarget, FinalizationRegistry, Float32Array, Float64Array, Function, Generator, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, MessageChannel, MessageEvent, MessagePort, 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, WeakRef, WeakSet, WebAssembly, arguments, clearImmediate, clearInterval, clearTimeout, console, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, escape, eval, expect, global, globalThis, isFinite, isNaN, jest, parseFloat, parseInt, process, queueMicrotask, require, 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.

       7 |     jest.mock('@ionic/react', () => {
       8 |         const rest = jest.requireActual('@ionic/react');
    >  9 |         return Object.assign(Object.assign({}, rest), { IonActionSheet: mockController_1.mockController, IonAlert: mockController_1.mockController, IonCheckbox: mockIonCheckbox_1.mockIonCheckbox, IonDatetime: react_1.IonInput, IonLoading: mockController_1.mockController, IonPicker: mockController_1.mockController, IonPopover: mockController_1.mockController, IonToast: mockController_1.mockController, IonModal: mockController_1.mockController, IonToggle: mockIonCheckbox_1.mockIonCheckbox });
         |                                                                                                                                                                                                                  ^^^^^^^
      10 |     });
      11 | }
      12 | exports.mockIonicReact = mockIonicReact;

      at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:250:12)
      at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:138:21)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:92:31)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:116:16)

This does not happen if I downgrade back to version 0.0.3.

[Adzerty]

Same problem here, I was in 0.1.1, I downgraded to version 0.0.3 and it worked.

[mkmatheson]

I had this problem on version 0.0.3. Upgraded to 0.2.0 and still didn't work. Inside mockIonicReact.js, Jest can't use the mockController unless the variable to which it is assigned also begins with the word "mock"
See
https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter
https://stackoverflow.com/questions/60665358/not-able-to-access-variables-in-jest-mock-function

[matheusbozetti]

I had the same problem with the latest versions.

Downgrading to 0.0.3 worked for me.

[zrev2220]

Just noticed version 0.2.0 was released a couple of months ago. Upgraded to that to see if anything changed, but unfortunately the issue still persists on that version. 😢

[zrev2220]

Still broken on 0.2.1. 😭

[zrev2220]

This seems to have been resolved in 0.3.0. If others can confirm, I think this can be closed.

[tekno0ryder]

This seems to have been resolved in 0.3.0. If others can confirm, I think this can be closed.

Still exists in 0.3.0

[zrev2220]

Still exists in 0.3.0

@tekno0ryder Weird, I upgraded and everything is working fine for my project now. 😕

[tekno0ryder]

Still exists in 0.3.0

@tekno0ryder Weird, I upgraded and everything is working fine for my project now. 😕

@zrev2220 I just wanted to test <IonInput/> events, so I ended up importing only ionFireEvent util and it's worked

import { ionFireEvent } from "@ionic/react-test-utils/dist/ionFireEvent";

[fxsalazar]

Still happening on 0.3.1:

ReferenceError: .../node_modules/@ionic/react-test-utils/dist/mocks/mockIonicReact.js: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: react_1
    Allowed objects: AbortController, AbortSignal, AggregateError, Array, ArrayBuffer, Atomics, BigInt, BigInt64Array, BigUint64Array, Boolean, Buffer, DataView, Date, Error, EvalError, Event, EventTarget, FinalizationRegistry, Float32Array, Float64Array, Function, Generator, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, MessageChannel, MessageEvent, MessagePort, 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, WeakRef, WeakSet, WebAssembly, arguments, atob, btoa, clearImmediate, clearInterval, clearTimeout, console, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, escape, eval, expect, global, globalThis, isFinite, isNaN, jest, parseFloat, parseInt, performance, process, queueMicrotask, require, 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.

       8 |     jest.mock('@ionic/react', () => {
       9 |         const rest = jest.requireActual('@ionic/react');
    > 10 |         return Object.assign(Object.assign({}, rest), { IonActionSheet: mockController_1.mockController, IonAlert: mockController_1.mockController, IonCheckbox: mockIonCheckbox_1.mockIonCheckbox, IonDatetime: react_1.IonInput, IonLoading: mockController_1.mockController, IonPicker: mockController_1.mockController, IonPopover: mockController_1.mockController, IonToast: mockController_1.mockController, IonModal: mockController_1.mockController, IonToggle: mockIonCheckbox_1.mockIonCheckbox, useIonPicker: useIonPicker_mock_1.mockUseIonPicker });
         |                                                                                                                                                                                                                  ^^^^^^^
      11 |     });
      12 | }
      13 | exports.mockIonicReact = mockIonicReact;

      at File.buildCodeFrameError (../../node_modules/@babel/core/lib/transformation/file/file.js:249:12)
      at NodePath.buildCodeFrameError (../../node_modules/@babel/traverse/lib/path/index.js:139:21)
      at newFn (../../node_modules/@babel/traverse/lib/visitors.js:177:21)
      at NodePath._call (../../node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (../../node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (../../node_modules/@babel/traverse/lib/path/context.js:100:31)
      at TraversalContext.visitQueue (../../node_modules/@babel/traverse/lib/context.js:103:16)

Isn't something with the configuration wise ?

[anantoghosh]

Until this issue is fixed, feel free to use https://www.npmjs.com/package/@ananto/react-test-utils as a drop in replacement.

[liamdebeasi]

Thanks for the report and apologies for the delay. This issue has been fixed in #44, and the fix will be available in the next release of Ionic React Test Utils.

Please note that we removed the IonDatetime mock in this patch. In Ionic v5, IonDatetime was rendered as an overlay which required us to use a mock (similar to what we do for IonModal, IonAlert, etc). In Ionic v6, IonDatetime is rendered inline so the mock is not needed. However, developers can continue to test IonDatetime in their apps.

[liamdebeasi]

This fix has been released as part of v0.4.0.

npm install @ionic/react-test-utils@latest