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

迭戈·塔格

我正在开发一个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来模拟依赖关系是可行的,但是我尝试了很多事情都没有成功。我尝试了这个问题的方法,也尝试这篇文章,我没有运气。我还阅读了Jest文档中Manual Mocks and Mock Functions指南,但我认为它们非常令人困惑。

我可以使它工作中使用的方法(即我可以嘲笑moduleA.js依赖)这个职位,但我有另外一个问题呢。测试moduleB.js效果很好,但是当我继续测试moduleA.js时,我不得不在moduleA.test.js中导入moduleA.js,并且在需要真实模块的同时得到了模拟。

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

我希望我很清楚是否不让我知道,我会补充您可能需要的说明。

提前致谢 !

阿拉伯人

确实,您可以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 />);
  });

您可以在此处看到一个有效的示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 React 应用程序中使用 Jest 模拟服务方法

在React Redux应用程序中使用Jest模拟浅呈现的承诺

将 TypeScript 模块从本地模块导入 React 应用程序

Angular 11 库模块已导入但未在消费应用程序中使用

如何在React应用程序中使用CSS模块应用全局样式?

在 React 应用程序中使用 ActiveMQ

在 React Native 应用程序和 Expo 中使用 Google Maps 等原生模块

如何在 nw/react 应用程序中使用 nodejs 模块

为什么Jest会尝试运行整个应用程序而不是导入的模块?

使用Jest模拟导入模块中的外部用户模块

如何在Angle 2中使用“ SystemJsNgModuleLoader”将动态模块导入到应用程序?

如何在 Choregraphe 的应用程序中导入模块(在其中使用相对较大的包)?

在模块中使用 R Shiny 应用程序下载 powerpoint

在Angular / Ionic应用程序中使用'normal'npm模块

在React应用程序中使用Babel模块解析器+ eslint +索引文件时无法解析模块

将 typescript 模块导入 React 应用程序中的 JS 模块

如何仅使用react-rails gem在rails应用程序中使用供应商React模块/组件?

使用Webpack在TypeScript React应用程序中导入SVG

如何使用Jest模拟ES6模块导入?

模拟使用使用导入*导入的玩笑的模块以测试React组件

应用程序无法使用模块的模块

在 React 应用程序中导入 mongoose npm 模块时出现类型错误

如何在React应用程序中导入highcharts子模块

在React / Webpack应用程序中将节点模块导入到Web Worker

如何在未模块化的应用程序中使用模块化的罐子?

React 中的 Jest 模块模拟

我无法在React + Redux应用程序中使用mapDispatchToProps

在 React 应用程序中使用 jQuery 关闭 Bootstrap 模式

在React应用程序中使用香草JavaScript包