首页 文章

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

提问于
浏览 次
6

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

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

我可以使用this post上的方法使它工作（即我可以模拟moduleA.js依赖），但我还有另一个问题 . 它可以很好地测试moduleB.js，但是当我继续测试moduleA.js时，我不得不在moduleA.test.js中导入moduleA.js而我得到了模拟，而我想要真正的模块 .

所以，我需要帮助来理解我如何在moduleB测试文件中模拟依赖关系A.

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

提前致谢 ！

reactjs unit-testing jestjs enzyme

1 回答

  • 5

    实际上，你可以使用 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 .

    回复于

相关问题