我正在研究一个React应用程序,我想测试一个模块,我们称之为B,这取决于另一个模块,我们称之为A.
场景可能是这样的:
export function helperFn() {
return { prop1: 10, prop2: 20 };
}
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是可行的,但是我尝试了很多东西却没有成功.我试过这个问题的方法,也来自这篇文章,我没有运气.我还阅读了Jest docs 的Manual Mocks and Mock Functions指南,但我认为它们非常令人困惑.
我可以使用这篇文章的方法使它工作(即我可以模拟moduleA.js依赖),但我还有另一个问题.它可以很好地测试moduleB.js,但是当我继续测试moduleA.js时,我不得不在moduleA.test.js中导入moduleA.js而我得到了模拟,而我想要真正的模块.
所以,我需要帮助来理解我如何在moduleB测试文件中模拟依赖关系A.
如果不让我知道,我希望我很清楚,我会补充你可能需要的澄清.
提前致谢 !
首先很抱歉，如果以前回答过这个问题，我找不到它。
由于某些原因，我现在正在工作的应用程序中，我们有一些材料用户界面组件的包装器。例如，我有一个 MyCompanyButton，它是material-ui Button 组件的包装器。
这真的很简单，就像这样：
const MyCompanyButton: React.FC<MyCompanyButtonProps> = (props): React.ReactElement => {
const { label, color, type } = props;
return (
<Button color={color} type={type}>
{label}
</Button>
);
};
问题在于道具的类型。
我的第一次尝试是将它们定义为：
type MyCompanyButtonProps = {
label: string;
color: string;
type: string;
};
但是当我尝试像这样使用我的组件时：
<MyCompanyButton color="primary" type="submit" label="Send" />
我收到以下错误：
类型“string”不可分配给类型“默认”| “继承”| “主要”| “次要”| 不明确的'。TS2769
我了解该错误，但我不知道如何修复它。我想重用material-ui类型，但我找不到它们。我知道在当前版本中它们内置在核心包中，但我不明白如何找到“颜色”类型并将其应用到我的颜色道具中。
到目前为止，我所做的就是从错误中获取类型定义并将其应用到我的 prop 中：
颜色：“默认”| “继承”| “主要”| “次要”| 不明确的;
但是，我认为这不是这样做的方法，因为如果库中的类型发生变化，我也需要在这里进行更改。
我希望有一个人可以帮助我。
谢谢 ！