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

jjhzyzn0  于 2022-12-08  发布在  Jest
关注(0)|答案(2)|浏览(170)

我正在处理一个React应用程序,我想测试一个模块,我们称之为B,它依赖于另一个模块,我们称之为A。
场景可能如下:

模块A.js

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

模块B.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 注入,而不是导入它,这样在测试过程中我可以注入一个模拟函数,但在这个应用程序上有一些模块相当大,每个模块都有一些依赖项。
我研究了一下,发现可以用Jest来模拟一个依赖关系,但是我尝试了很多方法都没有成功。我尝试了this questionthis post的方法,但是没有成功。我也读了Jest docs的Manual MocksMock Functions指南,但是我觉得它们很混乱。
我可以在this post上使用这种方法使它工作(也就是说,我可以模拟moduleA.js依赖关系),但是我遇到了另一个问题。测试moduleB.js工作得很好,但是当我继续测试moduleA.js时,我必须在moduleA.test.js中导入moduleA.js,我得到了模拟,而我想要的是真实的的模块。
因此,我需要帮助来理解我如何在moduleB测试文件中模拟依赖项A。
我希望我是清楚的,如果不让我知道,我会添加澄清你可能需要的。
提前感谢!

yizd12fk

yizd12fk1#

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

daolsyd0

daolsyd02#

我正在使用Vue2,并尝试为Vue组件编写测试。Vue组件使用了许多其他组件,这些组件实际上并不需要测试。
因此,我创建了一个导入其他组件的模拟,如下所示

jest.mock('@/core/components/UserInput.vue', () => ({
    exec: jest.fn(),
}));

相关问题