我正在处理一个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 question和this post的方法,但是没有成功。我也读了Jest docs的Manual Mocks和Mock Functions指南,但是我觉得它们很混乱。
我可以在this post上使用这种方法使它工作(也就是说,我可以模拟moduleA.js依赖关系),但是我遇到了另一个问题。测试moduleB.js工作得很好,但是当我继续测试moduleA.js时,我必须在moduleA.test.js中导入moduleA.js,我得到了模拟,而我想要的是真实的的模块。
因此,我需要帮助来理解我如何在moduleB测试文件中模拟依赖项A。
我希望我是清楚的,如果不让我知道,我会添加澄清你可能需要的。
提前感谢!
2条答案
按热度按时间yizd12fk1#
实际上,你可以使用
jest
来模拟你的依赖关系。为了使它与import
一起工作,你需要设置一些配置。例如,配置babel-jest
。如果你已经有了那个配置,那么你可以像这样模拟它。
您可以看到一个工作示例here。
daolsyd02#
我正在使用Vue2,并尝试为Vue组件编写测试。Vue组件使用了许多其他组件,这些组件实际上并不需要测试。
因此,我创建了一个导入其他组件的模拟,如下所示