ReferenceError：在初始化之前无法访问“mockMethod1”答案

【问题标题】：ReferenceError: Cannot access 'mockMethod1' before initializationReferenceError：在初始化之前无法访问“mockMethod1”
【发布时间】：2020-10-23 23:58:00
【问题描述】：

我有 3 个源文件 File1.ts、File2.ts、File3.ts。在执行 File3 的单元测试时，出现以下错误。

Test suite failed to run

    ReferenceError: Cannot access 'mockMethod1' before initialization

      20 |     __esModule: true,
      21 |     default: jest.fn(),
    > 22 |     method1: mockMethod1,
         |              ^
      23 |     method2: mockMethod2
      24 | }));
      25 |

这是 File3 的 3 个源文件和单元测试的内容。

File1.ts

export default class File1 {
    public element;

    constructor(element) {
        this.element = element;
    }

     method1(inputs) {
         // Logic of Method1.
         return output;
     }

     method2(inputs) {
         // Logic of Method2.
         return output;
     }
}

File2.ts

import File1 from '../Folder1/File1'

export default class File2 {
    public file1Object;

    constructor(element) {
        this.file1Object = new File1(element);
    }

     method1(inputs) {
         // Logic of Method1.
         let out = this.file1Object.method1(inputs);
         // Logic of Method1.
         return output;
     }

     method2(inputs) {
         // Logic of Method2.
         let out = this.file1Object.method2(inputs);
         // Logic of Method2.
         return output;
     }
}

File3.ts

import File2 from '../Folder2/File2'
export default class File3 {
    public file2Object;

    constructor(element) {
        this.file2Object = new File2(element);
    }

     method1(inputs) {
         // Logic of Method1.
         let out = this.file2Object.method1(inputs);
         // Logic of Method1.
         return output;
     }

     method2(inputs) {
         // Logic of Method2.
         let out = this.file2Object.method1(inputs);
         // Logic of Method2.
         return output;
     }
}

File3.test.ts

import File3 from "./File3";
import File2 from "../Folder2/File2";

const mockMethod1 = jest.fn();
const mockMethod2 = jest.fn();

jest.mock('../Folder2/File2', () => ({
    __esModule: true,
    default: jest.fn(),
    method1: mockMethod1,
    method2: mockMethod2
}));

const file3Object = new File3(inputElement);
beforeEach(() => {
    jest.clearAllMocks();
});

test('Method-1 Unit Test', () => {
    mockMethod1.mockReturnValue(expectedOutput);
    let observedOutput = file3Object.method1(inputs);

    expect(observedOutput).toBe(expectedOutput);
})

test('Method-2 Unit Test', () => {
     mockMethod2.mockReturnValue(expectedOutput);
    let observedOutput = file3Object.method2(inputs);
     
     expect(observedOutput).toBe(expectedOutput);
})

我不确定我在哪里犯了错误，所以我无法解决这个错误。任何解决此问题的建议。

【问题讨论】：

标签： javascript typescript unit-testing jestjs

【解决方案1】：

有几件事会造成麻烦。首先，如jest docs中提到的：

factory 参数的一个限制是，由于对 jest.mock() 的调用被提升到文件的顶部，因此不可能先定义变量然后在工厂中使用它。以“mock”开头的变量例外。 由您来保证它们会按时初始化！

这意味着您需要移动代码行以使它们看起来像这样：

  // First the mock functions
  const mockMethod1 = jest.fn();
  const mockMethod2 = jest.fn();
  
  // Only then your imports & jest.mock calls
  import File3 from "./File3";
  import File2 from "../Folder2/File2";

  jest.mock('../Folder2/File2', () => ({
    // ...
  }));

第二个问题是你在模拟File2，就好像它在导出method1和method2，你不是在模拟File2类的method1和method2！看看4 ways of mocking an ES6 class in jest docs。

【讨论】：