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

Question

我正在开发一个 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 作为 prop 注入(inject)，而不是导入它，因此在测试期间我可以注入(inject)一个模拟函数，但是这个应用程序上有一些相当大的模块，每个模块都有一些依赖项。

经过一番研究，我发现可以使用 Jest 来模拟依赖关系，但我尝试了很多方法但没有成功。我尝试了 this question 中的方法，也来自 this post我没有运气。我还阅读了Manual Mocks和 Mock Functions来自 Jest 文档的指南，但我认为它们非常令人困惑。

我可以使用 this post 上的方法让它工作(即我可以模拟 moduleA.js 依赖项) ，但当时我还有另一个问题。它在测试 moduleB.js 时工作得很好，但是当我继续测试 moduleA.js 时，我必须在 moduleA.test.js 中导入 moduleA.js，并且在我想要真正的模块时得到了模拟。

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

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

提前致谢!

Answer 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 .