Jest Manual Mocks with React 和 Typescript：模拟 ES6 类依赖

Posted 2023-02-22

【中文标题】Jest Manual Mocks with React 和 Typescript：模拟 ES6 类依赖

【英文标题】：Jest Manual Mocks with React and Typescript: mock an ES6 class dependency

【发布时间】：2018-09-07 01:23:32

【问题描述】：

我对 Jest 完全陌生。

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

我要测试的文件导入了这个模块：

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

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

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

这个文件叫做AppPage.component.tsx

测试文件位于同一文件夹中，当我使用自动模拟时，它按预期工作。自动mock只需通过同一个import的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__ 子文件夹中，并且我尝试将它也放在我想要模拟的导入模块的同一文件夹中。 在这两种情况下，它似乎都没有被调用（第一个控制台日志永远不会被打印）。

请知道我做错了什么吗？

【参考方案1】：

我已经找到了让它工作的方法。

需要几个步骤来整理它：

当你模拟你的依赖时，你可以把你的__mock__ 文件夹或者在你正在测试的导入它的主文件的同一级别，或者在你要模拟的类的同一级别 在您的单元测试文件中，必须先调用 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

【讨论】：

它有帮助！谢谢 :D 对我来说问题是文件导入顺序，我在需要测试的文件之后导入了jest.mock()。

@Arcagully 我很高兴它帮助了别人，我“浪费”时间来发布我自己的问题的解决方案是有道理的：D