Jest: babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.

[AndyOGo]

🐛 Bug Report

Spying on mocked methods as described in docs, throws babel-plugin-jest-hoist: The module factory ofjest.mock()is not allowed to reference any out-of-scope variables.:

const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
 return jest.fn().mockImplementation(() => {
   return {playSoundFile: mockPlaySoundFile};
   // Now we can track calls to playSoundFile
 });
});

https://jestjs.io/docs/en/es6-class-mocks#spying-on-methods-of-our-class

To Reproduce

Steps to reproduce the behavior:

Follow the docs here https://jestjs.io/docs/en/es6-class-mocks#spying-on-methods-of-our-class

Expected behavior

What is documented should work:
https://jestjs.io/docs/en/es6-class-mocks#spying-on-methods-of-our-class

Link to repl or repo (highly encouraged)

Similiar issue https://github.com/facebook/jest/issues/2567

envinfo

npx: installed 1 in 1.27s

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.19.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  npmPackages:
    jest: ^24.9.0 => 24.9.0

[AndyOGo]

Alright, it seems all mocked functions need to be prefixed with mock*, but if I do that, the value of the mock is undefined 🤔

out-of-scope Error:

const foo = jest.fn();
jest.mock('./foo', () => ({
  // throws: babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-scope variables.
  foo,
}))

Prefixing with mock does not throw, but value of mock is undefined:

// prefixing with mock avoids out-of-scope error to be thrown
// but value of foo will be undefined
const mockFoo = jest.fn();
jest.mock('./foo', () => ({
  foo: mockFoo,
}))

[AndyOGo]

Only way I got it working is by importing my mock within my testfile, like:

// only here mockFoo will be deifned!
import { foo as mockFoo } from './foo';

jest.mock('./foo', () => ({
  foo: jest.fn();,
}))

[SimenB]

Yeah, this is the correct behavior. You get the warning since jest.mock is hoisted. You can tell Jest "I know what I'm doing" and name the variable mock something, but then you need to actually make sure it's instantiated, which it's not in your case.

You can import the mock function again as you note, that's usually the cleanest solution.

---

This is all expected, and documented, behavior. If you have further questions, please use StackOverflow or our discord channel. If the docs can be improved, a PR is always welcome!

[AndyOGo]

@SimenB
Thanks for your answer.

Please check the docs, I think especially this page and the coding example is misleading, in addition it does not mention the mock prefix 🤔
https://jestjs.io/docs/en/es6-class-mocks#spying-on-methods-of-our-class

Also the Readme of babel-plugin-jest-hoist doesn't mention the mock prefix 🤔
https://github.com/facebook/jest/tree/master/packages/babel-plugin-jest-hoist

But the source code has a comment about it:

// We also allow variables prefixed with mock as an escape-hatch.
https://github.com/facebook/jest/blob/master/packages/babel-plugin-jest-hoist/src/index.ts#L14

... and an implementation 🤔
https://github.com/facebook/jest/blob/master/packages/babel-plugin-jest-hoist/src/index.ts#L122