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而不是导入它，所以在测试期间我可以注入一个mock函数，但是这个app上有很多模块，每个模块都有一些依赖。< / p>

稍微研究一下我发现使用Jest模仿一个dependecy是可行的，但是我尝试了很多东西却没有成功。我尝试了来自this question的方法，也来自this post，我没有运气。我还阅读了Jest文档中的Manual Mocks和Mock Functions指南，但我认为它们非常令人困惑。

我可以使用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。

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

moduleA.js

moduleB.js

1 个答案: