{"id":569,"hash":"de04f9f942db93583d43e1097269c374ddc9b2f72adf4fd692b21253bfb7a26a","pattern":"Service mocked with Jest causes &quot;The module factory of jest.mock() is not allowed to reference any out-of-scope variables&quot; error","full_message":"I'm trying to mock a call to a service but I'm struggeling with the following message: The module factory of jest.mock() is not allowed to reference any out-of-scope variables.\n\nI'm using babel with ES6 syntax, jest and enzyme.\n\nI have a simple component called Vocabulary which gets a list of VocabularyEntry-Objects from a vocabularyService and renders it.\n\nimport React from 'react';\nimport vocabularyService from '../services/vocabularyService';\n\nexport default class Vocabulary extends React.Component {\n    render() {\n\n        let rows = vocabularyService.vocabulary.map((v, i) => <tr key={ i } >\n            <td>{ v.src }</td>\n            <td>{ v.target }</td>\n        </tr>);\n        // render rows\n    }\n}\n\nThe vocabularyServise ist very simple:\n\nimport { VocabularyEntry } from '../model/VocabularyEntry';\n\nclass VocabularyService {\n\n    constructor() {\n        this.vocabulary = [new VocabularyEntry(\"a\", \"b\")];\n    }\n}\nexport default new VocabularyService();\n\nNow I want to mock the vocabularyService in a test:\n\nimport { shallow } from 'enzyme';\nimport React from 'react';\nimport Vocabulary from \"../../../src/components/Vocabulary \";\nimport { VocabularyEntry } from '../../../src/model/VocabularyEntry'\n\njest.mock('../../../src/services/vocabularyService', () => ({\n\n    vocabulary: [new VocabularyEntry(\"a\", \"a1\")]\n\n}));\n\ndescribe(\"Vocabulary tests\", () => {\n\n    test(\"renders the vocabulary\", () => {\n\n        let $component = shallow(<Vocabulary/>);\n\n        // expect something\n\n    });\n});\n\nRunning the test causes an error: Vocabulary.spec.js: babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-scope variables.\nInvalid variable access: VocabularyEntry.\n\nAs far as I unterstood, I cannot use the VocabularyEntry because it is not declares (as jest moves the mock definition to the top of the file).\n\nCan anyone please explain how I can fix this? I saw solutions which required the references insinde the mock-call but I do not understand how I can do this with a class file.","ecosystem":"npm","package_name":"unit-testing","package_version":null,"solution":"The problem is that all jest.mock will be hoisted to the top of actual code block at compile time, which in this case is the top of the file. At this point VocabularyEntry is not imported. You could either put the mock in a beforeAll block in your test or use jest.mock like this:\n\nimport {shallow} from 'enzyme';\nimport React from 'react';\nimport Vocabulary from \"../../../src/components/Vocabulary \";\nimport {VocabularyEntry} from '../../../src/model/VocabularyEntry'\nimport vocabularyService from '../../../src/services/vocabularyService'\n\njest.mock('../../../src/services/vocabularyService', () => jest.fn())\n\nvocabularyService.mockImplementation(() => ({\n  vocabulary: [new VocabularyEntry(\"a\", \"a1\")]\n}))\n\nThis will first mock the module with a simple spy and after all stuff is imported it sets the real implementation of the mock.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/44649699/service-mocked-with-jest-causes-the-module-factory-of-jest-mock-is-not-allowe","votes":153,"created_at":"2026-04-19T04:51:22.568161+00:00","updated_at":"2026-04-19T04:51:27.263733+00:00"}