unit-testing - 使用 Jest 模拟的服务会导致 "The module factory of jest.mock() is not allowed to reference any out-of-scope variables"错误

Question

我正在尝试模拟对服务的调用，但我遇到了以下消息:jest.mock() 的模块工厂不允许引用任何输出作用域变量。

我正在使用 babel 和 ES6 语法、 Jest 和 enzyme 。

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

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:

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: jest.mock() 的模块工厂不允许引用任何 out-of-范围变量。无效的变量访问:VocabularyEntry。

据我了解，我无法使用 VocabularyEntry，因为它没有声明(因为开 Jest 将模拟定义移动到文件顶部)。

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

Answer 1

您需要将模拟组件存储在名称前缀为“mock”的变量中。该解决方案基于我收到的错误消息末尾的注释。

Note: This is a precaution to guard against uninitialized mockvariables. If it is ensured that the mock is required lazily, variablenames prefixed with mock are permitted.

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

const mockVocabulary = () => new VocabularyEntry("a", "a1");

jest.mock('../../../src/services/vocabularyService', () => ({
    default: mockVocabulary
}));

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

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

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

    // expect something

});