Invalid variable access: _jsxFileName

Describe the bug

My tests are failing because I have some Jest mocks that use JSX. The error is Invalid variable access: _jsxFileName.

It seems to be related to https://github.com/facebook/jest/issues/10690

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

_jsxFileName

Environment

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    react: ^16.6.3 => 16.14.0 
    react-dom: ^16.6.0 => 16.14.0 
    react-scripts: ^4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. create a test file
2. add jest.mock('./someModule', () => () => <div />)
3. run the tests to observe the error

Expected behavior

Tests should work.

Actual behavior

  ● Test suite failed to run

    ReferenceError: /Users/federicozivolo/Projects/[...]/frontend/src/__mocks__/material-ui.js: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: _jsxFileName
    Allowed objects: Array, ArrayBuffer, Atomics, BigInt, BigInt64Array, BigUint64Array, Boolean, Buffer, DataView, Date, Error, EvalError, Float32Array, Float64Array, Function, 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, 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.
     (This is an error on an internal node. Probably an internal error.)

      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:163:21)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[MarkLyck]

@SimenB figured it out. It was due to my location of jest.mock() I needed to move it outside of my actual test so it could hoist properly.

before:

describe('stuff', () => {
  test('my test', () => {
     jest.mock('./myModule')
  })
})

after

jest.mock('./myModule')
 
describe('stuff', () => {
  test('my test', () => {
    
  })
})

I’ll leave this here, since this is the only issue I found with the error I got. Hope it helps some one else.

[yann-combarnous]

Same here, I had to disable the new JSX transform for my tests to run. DISABLE_NEW_JSX_TRANSFORM=true