Create-react-app: Invalid variable access: _jsxFileName

[FezVrasta]

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.)

[yann-combarnous]

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

[lc-brunomonteiro]

In my case, it was solved by creating a __mock__ folder with the mocked module, so instead of creating the mock inside the function as it was before
```javascript
jest.mock('../folder/myModule', () => {
return {
__esModule: true,
default: function myModule() {
return

My Module

},
}
})
````

I just pointed to the manual mock:
```javascript
// Mock import
jest.mock('../folder/myModule')

// Folder structure
../folder/__mock__/myModule

//File in "../folder/__mock__/myModule"
import React from 'react'

function MyModule() {
return

My Module

}

export default Cover
````

Reference: https://jestjs.io/docs/en/manual-mocks

[stl-alehskrypko]

@yann-combarnous, how did you disabled new JSX transform? I tried adding process.env.DISABLE_NEW_JSX_TRANSFORM = 'true' to setupTests.js and directly in .env - doesn't seem to have any effect. Tried to console.log(process.env), and this flag is true, but I still experiencing this behavior.

[SimenB]

Fixed in [email protected] or more specifically [email protected]. Updating your lockfile should resolve this 🤞

[ianschmitz]

Jest is still pinned currently: https://github.com/facebook/create-react-app/blob/aec42e2cc05fe0799a3b73830b874757e9e3f561/packages/react-scripts/package.json#L61

Will require us to bump the version.

Edit: I read your comment more closely @SimenB. I assume [email protected] will fuzzy match that fix?

[SimenB]

Yep, just removing babel-plugin-jest-hoist from the lockfile and re-running yarn/npm will pull in the fix.

Bumping up the Jest version in CRA would be nice though. I plan to release one final v26 patch tomorrow before starting work on v27 - shipping the lastest 26 by default in CRA would be nice.