用React和Typescript开玩笑的嘲笑：模拟ES6类依赖

Question

我对Jest完全陌生。

我正在使用带有Typescript的React，并且在单元测试中，我必须模拟一个模块，该模块包含在我要为其编写容器测试（容器组件）的主文件中。

我尝试测试的文件导入了此模块：

import PerformancesResultsReader from './../../models/PerformancesResultsReader';

然后它通过以下方式使用该模块：

const performancesResultsReader = new PerformancesResultsReader();
performancesResultsReader.read();

该文件称为 AppPage.component.tsx

测试文件位于同一文件夹中，当我使用自动模拟时，它可以按预期工作。自动模拟是通过jest mock相同导入的来简单实现的：

jest.mock('./../../models/PerformancesResultsReader');

这样，所有方法都简单地返回undefined。

现在，我试图添加一个手动模拟而不是自动模拟。

这是PerformancesResultsReader.js模拟代码：

console.log('including mock!');

const mock = jest.fn().mockImplementation(() => {
    return {
        read: () => {
            console.log('mocked');
        }
    };
});

export default mock;

我试图将其放置__mocks__在与我正在测试的文件相同级别的子文件夹中，并且尝试将其也放置在要模拟的导入模块的同一文件夹中。在这两种情况下，它似乎根本没有被调用（第一个控制台日志永远不会被打印）。

请问我做错了什么吗？

Answer 1

我找到了使其工作的方法。

整理步骤仅需几个步骤：

1. 在__mock__模拟依赖项时，可以将文件夹放置在测试要导入的主文件的同一级别，也可以放置在要模拟的类的同一级别
2. 在单元测试文件中，对to的调用jest.mock必须在包含要测试的主文件之前发生，该主文件要求模拟该文件

因此，代码如下。

要进行单元测试的主文件（AppPage.component.tsx）：

// all imports
import PerformancesResultsReader from './../../models/PerformancesResultsReader'; // dependency to be mocked

// your AppPage component here
export default AppPage; 

在__mock__子文件夹（PerformancesResultsReader.tsx）中模拟：

class PerformancesResultsReader {
    constructor() {
        console.log('Mock constructor');
    }
    // all your methods here
}

export default PerformancesResultsReader;

最后的单元测试（AppPage.component.spec.tsx）：

// call the defined mock
jest.mock('./../../models/PerformancesResultsReader');
// import the main file which is going to be tested
import AppPage from './AppPage.component';

describe('App Container Component', () => {
    // your tests
});

上面示例的文件夹结构如下：

- components
-- AppPage.component.tsx
-- AppPage.component.spec.tsx
- models
-- PerformancesResultsReader.tsx
-- __mock__
--- PerformancesResultsReader.tsx