在 React 应用程序中使用 Jest 模拟导入/模块

Posted 2023-03-08

【中文标题】在 React 应用程序中使用 Jest 模拟导入/模块

【英文标题】：Mock import/module with Jest in React application

【发布时间】：2018-04-28 04:24:41

【问题描述】：

我正在开发一个 React 应用程序，我想测试一个模块，我们称之为 B，它依赖于另一个模块，我们称之为 A。

场景可能是这样的：

moduleA.js

export function helperFn() 
  return  prop1: 10, prop2: 20 ;

moduleB.js

import React from 'react';
import  helperFn  from '../moduleA';

export class CustomComp extends React.Component 
  render() 
    const helperObj = helperFn();
    return (
      <div>helperObj.prop1</div>
    );
  

测试我的组件的核心库是 Jest 和 Enzyme。我的目标是测试模块 B，但我想单独测试它，所以我想模拟对 moduleA.js 的依赖。

我知道一种方法是将 helperFn 作为道具注入而不是导入它，因此在测试期间我可以注入一个模拟函数，但是这个应用程序上有相当大的模块，每个模块都有一些依赖项。

研究了一下，我发现使用 Jest 来模拟依赖是可能的，但是我尝试了很多事情都没有成功。我尝试了this question 和this post 的方法，但我没有运气。我还阅读了 Jest 文档中的 Manual Mocks 和 Mock Functions 指南，但我认为它们相当混乱。

我可以使用this post 上的方法使其工作（即我可以模拟 moduleA.js 依赖项），但那时我遇到了另一个问题。测试 moduleB.js 效果很好，但是当我继续测试 moduleA.js 时，我必须在 moduleA.test.js 中导入 moduleA.js，而我得到了模拟，而我想要真正的模块。

所以，我需要帮助来了解如何在 moduleB 测试文件中模拟依赖项 A。

如果不让我知道，我希望我很清楚，我会添加您可能需要的说明。

提前致谢！

【参考方案1】：

确实，您可以使用jest 来模拟您的依赖关系。您需要设置一些配置才能使其与import 一起使用。例如。配置babel-jest。

如果您已经拥有该配置，那么您可以像这样模拟它。

import React from 'react';
import  shallow  from 'enzyme';
import  helperFn  from '../moduleA';
jest.mock('../moduleA');

describe("CustomComp", () => 
  it("should render component", () => 
    helperFn.mockReturnValueOnce(
      prop1: "dummy"
    );
    const component = shallow(<CustomComp />);
  );

您可以看到一个工作示例here。

【讨论】：

谢谢，我尝试了一些我在问题中解释的方法，但它们没有奏效，但这确实奏效了。

链接坏了，请修复一下