从库中模拟一个 ES6 类答案

【问题标题】：Mocking an ES6 class from a library从库中模拟一个 ES6 类
【发布时间】：2020-10-17 17:13:23
【问题描述】：

我在一个库中有一个 WindowEnv ES6 类，我试图模拟它。该类位于我的 React 应用程序所依赖的名为 @react-force/models 的包中。这是WindowEnv 类的代码：

// Env.ts in @react-force/models
export interface Env {
    get: (varName: string) => string;
}

export class WindowEnv implements Env {
    get(varName: string): string {
        return (window as any)._env_[varName];
    }
}

这是在我的应用程序中使用此类的代码：

const env = new WindowEnv();
export const api = axios.create({
    baseURL: env.get('API_URL'),
});

我试图通过在/__mocks__/@react-force/models.ts 中添加以下代码来模拟WindowEnv 类：

//  /__mocks__/@react-force/models.ts
export const WindowEnv = jest.fn(() => {
    return {
        get: (varName: string): string => {
            switch (varName) {
                case 'API_URL': {
                    return 'http://localhost:8080';
                }
                default: {
                    return '';
                }
            }
        },
    };
});

不幸的是，这没有任何区别。测试无法看到模拟并引发错误。我做错了什么？

模拟类与整个项目一起提供here。

【问题讨论】：

问题没有提到__mocks__ 的位置，但它似乎在项目根目录中，并且项目是CRA。应该在 src 中，见github.com/facebook/create-react-app/issues/7539
你击中了它的头部，埃斯图斯。我一移动 /src 下的 mocks 文件夹，一切就开始工作了！请添加您的评论作为答案，我会将其标记为正确答案。

标签： reactjs jestjs create-react-app

【解决方案1】：

正如 Jest 文档所述：

如果您要模拟的模块是 Node 模块（例如：lodash），则模拟应放置在与 node_modules 相邻的 __mocks__ 目录中（除非您将根配置为指向项目根以外的文件夹）和将被自动模拟。

这种方式全局模块模拟不会干扰驻留在src 中的本地模块。

这是一个 known issue 用于 Create React App 项目中的 node_modules 模拟。 __mocks__ 需要移到 src 内部。

【讨论】：

我花了太多时间试图找到并解决这个问题。你是救生员，谢谢
很高兴它帮助了你。