用 Jest 模拟的服务导致“不允许 jest.mock() 的模块工厂引用任何范围外的变量"；错误 [英] Service mocked with Jest causes "The module factory of jest.mock() is not allowed to reference any out-of-scope variables" error

问题描述

我正在尝试模拟对服务的调用，但我正在努力处理以下消息:jest.mock() 的模块工厂不允许引用任何输出-of-scope 变量.

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.

我正在使用带有 ES6 语法、笑话和酶的 babel.

I'm using babel with ES6 syntax, jest and enzyme.

我有一个名为 Vocabulary 的简单组件，它从 vocabularyService 获取 VocabularyEntry-Objects 的列表并呈现它.

I have a simple component called Vocabulary which gets a list of VocabularyEntry-Objects from a vocabularyService and renders it.

import React from 'react';
import vocabularyService from '../services/vocabularyService';

export default class Vocabulary extends React.Component {

render() {

    let rows = vocabularyService.vocabulary.map((v, i) => <tr key={i}>
            <td>{v.src}</td>
            <td>{v.target}</td>
        </tr>
    );
    // render rows
 }
 }

vocabularyServise 非常简单:

  import {VocabularyEntry} from '../model/VocabularyEntry';

  class VocabularyService {

  constructor() {
       this.vocabulary = [new VocabularyEntry("a", "b")];
  }
} 
export default new VocabularyService();`

现在我想在测试中模拟 vocabularyService:

Now I want to mock the vocabularyService in a test:

import {shallow} from 'enzyme';
import React from 'react';
import Vocabulary from "../../../src/components/Vocabulary ";
import {VocabularyEntry} from '../../../src/model/VocabularyEntry'

jest.mock('../../../src/services/vocabularyService', () => ({

vocabulary: [new VocabularyEntry("a", "a1")]

}));

describe("Vocabulary tests", () => {

test("renders the vocabulary", () => {

    let $component = shallow(<Vocabulary/>);

    // expect something

});

});

运行测试报错:Vocabulary.spec.js: babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-范围变量.无效的变量访问:VocabularyEntry.

Running 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. Invalid variable access: VocabularyEntry.

据我所知，我不能使用 VocabularyEntry，因为它没有声明(因为 jest 将模拟定义移动到文件的顶部).

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

谁能解释一下我该如何解决这个问题?我看到了在模拟调用中需要引用的解决方案，但我不明白如何使用类文件来做到这一点.

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

推荐答案

问题是所有的 jest.mock 在编译时都会被提升到实际代码块的顶部，在这种情况下是文件的顶部.此时 VocabularyEntry 没有被导入.您可以将 mock 放在测试中的 beforeAll 块中，或者像这样使用 jest.mock :

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:

import {shallow} from 'enzyme';
import React from 'react';
import Vocabulary from "../../../src/components/Vocabulary ";
import {VocabularyEntry} from '../../../src/model/VocabularyEntry'
import vocabularyService from '../../../src/services/vocabularyService'

jest.mock('../../../src/services/vocabularyService', () => jest.fn())

vocabularyService.mockImplementation(() => ({
  vocabulary: [new VocabularyEntry("a", "a1")]
}))

这将首先使用一个简单的 spy 模拟模块，然后在导入所有内容后设置模拟的实际实现.

This will first mock the module with a simple spy and after all stuff is imported it sets the real implementation of the mock.

这篇关于用 Jest 模拟的服务导致“不允许 jest.mock() 的模块工厂引用任何范围外的变量"；错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！