reactjs - 如何在 React with Jest 中测试这条线?
问题描述
我正在尝试达到 100% 的测试覆盖率,但只有一行我根本不知道如何测试。谁能帮我?我当然在使用 Jest、React-testing-library 和 ReactJS。
我也希望能解释一下这条线是如何测试的,因为我正在努力提高测试水平。
const LatestDataListItem = props => {
const getThemeTone = useThemeTone(); /* this hooks is simply returning a string(whick can be dark or light) */
return (
<StyledItem {...props}>
<StyledValue
primaryTextProps={{
style: {
fontSize: '32px',
color: isCaution(props) /* this is what i'm trying to cover */
? getCautionColorByTheme(getThemeTone).red
: getCautionColorByTheme(getThemeTone).blue
}
}}
/>
</StyledItem>
);
};
注释行是我要测试的内容:
color: isCaution(props)
? getCautionColorByTheme(getThemeTone).red : getCautionColorByTheme(getThemeTone).blue
这是isCaution
功能:
const isCaution = ({ caution }) => {
return true; /* returning true only to make easier to post here */
};
这是getCautionColorByTheme
:
const colorsByThemeTone = {
light: {
blue: '#0d3459',
red: '#f2463d',
lightRed: 'rgba(255, 0, 0, 0.07)'
},
dark: {
blue: '#e8e8e8',
red: '#fa5a4b',
lightRed: '#fa5a4b'
}
};
const getCautionColorByTheme = themeTone => {
return colorsByThemeTone[themeTone];
};
因此,colorsByThemeTone 是一个具有 2 种类型的对象:浅色和深色。如果主题是深色或浅色,getThemeTone 返回,这就是我获得颜色的方式。
我在想,也许我需要getCautionColorByTheme
在我的文件上导出以导入.test.js
并在里面测试这个函数,但我不知道具体是怎么做的。
这是我尝试过的:
it('should render the test getCautionColorByTheme receiving light theme', () => {
const colorsByThemeTone = {
light: {
blue: '#0d3459',
red: '#f2463d',
lightRed: 'rgba(255, 0, 0, 0.07)'
},
dark: {
blue: '#e8e8e8',
red: '#fa5a4b',
lightRed: '#fa5a4b'
}
};
const result = getCautionColorByTheme('light');
expect(result).toMatchObject(colorsByThemeTone.light);
});
谢谢!
解决方案
我建议制作getCautionColorByTheme()
一个纯函数:
const getCautionColorByTheme = (themeTone) => {
const colorsByThemeTone = {
light: {
blue: '#0d3459',
red: '#f2463d',
lightRed: 'rgba(255, 0, 0, 0.07)'
},
dark: {
blue: '#e8e8e8',
red: '#fa5a4b',
lightRed: '#fa5a4b'
}
};
return colorsByThemeTone[themeTone];
}
或者为了更灵活的实现(你必须调整消费者getCautionColorByTheme()
):
const getCautionColorByTheme = ({
themeTone,
colorsByThemeTone = {
light: {
blue: '#0d3459',
red: '#f2463d',
lightRed: 'rgba(255, 0, 0, 0.07)'
},
dark: {
blue: '#e8e8e8',
red: '#fa5a4b',
lightRed: '#fa5a4b'
}
}
}) => colorsByThemeTone[themeTone]
如果还没有,isCaution()
也可以做纯。这样,您可以单独测试逻辑。
it('should render the test getCautionColorByTheme receiving light theme', () => {
// should be the same what's the value in getCautionColorByTheme()
// better if the default value in `getCautionColorByTheme()` is
// exported as a variable and then used in the test.
const colorsByThemeTone = {
light: {
blue: '#0d3459',
red: '#f2463d',
lightRed: 'rgba(255, 0, 0, 0.07)'
},
dark: {
blue: '#e8e8e8',
red: '#fa5a4b',
lightRed: '#fa5a4b'
}
};
const result = getCautionColorByTheme('light');
expect(result).toMatchObject(colorsByThemeTone.light);
});
推荐阅读
- php - Laravel 保存方法不更新记录
- terraform - Terraform Enterprise 模块文件位置错误
- vba - 如何使用outlook vba将html内容附加到word中
- python - 在 Sklearn 的 SVC 中,当标签大小很大时,为什么训练时间与最大迭代不严格线性?
- node.js - 使用 Mongo 聚合有条件地计算集合中的外部字段
- android - 如何禁用显示输入文本的灰色框
- javascript - D3 和 java 脚本
- python - 如何从 Python 中的集合列表创建集合?
- ios - 重绘时未清除 UIBezierPath
- java - 如何计算已加在一起的组的 MAX 和 MIN