React应用程序中带有Jest的模拟导入/模块

Question

我正在开发一个React应用程序，我想测试一个模块，我们称之为B，这取决于另一个模块，我们称之为a。

场景可能是这样的：

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

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

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

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

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

研究了一下，我发现用笑话嘲笑一个依赖是可行的，但是我尝试了很多事情都没有成功。我试图从这个问题，也从这篇文章的方法，我没有运气。我还阅读了Jest文档中的手动模拟和模拟函数指南，但我认为它们非常令人困惑。

我可以使用这篇文章中的方法使它工作（即，我可以模拟moduleA.js依赖关系），但当时我遇到了另一个问题。测试moduleB效果很好。js，但当我继续测试moduleA时。js，我必须导入moduleA。模块a中的js。测验js和我得到了模拟，而我想要的是真正的模块。

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

我希望我是清楚的，如果不让我知道，我会补充你可能需要的澄清。

提前感谢！

Answer 1

事实上，您可以使用jest来模拟您的依赖关系。您需要设置一些配置，以使其与导入一起工作。例如配置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 />);
  });

您可以在这里看到一个工作示例。