javascript - 如何使用 Jest + Enzyme 覆盖 Svg react 组件的测试用例
问题描述
我对反应测试比较陌生。任何帮助/建议表示赞赏。我有这个简单的PencilIcon
组件。我看到了测试覆盖率报告,下面的粗体文本表示那些粗体文本或代码行不在测试覆盖范围内。
我如何确保对这些文本行进行测试覆盖。有人可以指出我如何为下面的粗体文本编写测试用例。
我无法使代码加粗。基本上,下面这行代码没有包含在测试覆盖率报告中。
const classNames = getClasses({ styles, classes: ['pencilIcon'], className, brand })***
return (
这是完整的组件
import React from 'react'
import { getClasses } from '../es/lib'
import SvgIcon from '../SvgIcon'
import styles from './PencilIcon.less'
const PencilIcon = ({ brand, className, ...keepProps }) => {
const classNames = getClasses({ styles, classes: ['pencilIcon'], className, brand })
return (
<SvgIcon {...keepProps} className={classNames} viewBox="0 0 44 44">
<path d="M18.999 31.396l-6.83 2.704a8.362 8.362 0 0 0-.868-1.026 8.535 8.535 0 0 0-1.438-1.148l2.74-6.924-1.208-1.209-5.127 12.954a.764.764 0 0 0 .16.826.764.764 0 0 0 .825.16l12.955-5.128-1.209-1.209zM36.949 11.929L32.07 7.051a2.87 2.87 0 0 0-2.029-.841c-.734 0-1.469.28-2.029.841l-15.8 15.803 8.937 8.937L33.56 19.377l3.39-3.39a2.869 2.869 0 0 0-.001-4.058zm-10.799.038l2.237 2.238L17.503 25.09l-2.237-2.236L26.15 11.967zm-5.002 16.768l-2.117-2.117 10.885-10.886 2.116 2.116-10.884 10.887z" />
</SvgIcon>
)
}
PencilIcon.defaultProps = {
title: 'Edit',
width: '44px',
height: '44px'
}
export default PencilIcon
这是getClasses
导入到上述组件中的内容。
export const getClasses = ({
styles = {},
classes = [],
className = '',
brand = '',
device = {}
}) => {
const classesInStyles = classes.concat([brand]).filter(_class => !!_class).map(name => styles[name]);
if (device.platform) {
classesInStyles.push(styles[device.platform === '7P' ? 'desktop' : 'mobile']);
device.keyboardOpen && classesInStyles.push(styles.keyboard);
}
return [...classesInStyles, className].join(' ').trim();
};
解决方案
我建议从不同的文件中导入这一行并将其排除在测试覆盖范围之外。
<SvgIcon {...keepProps} className={classNames} viewBox="0 0 44 44">
<path d="M18.999 31.396l-6.83 2.704a8.362 8.362 0 0 0-.868-1.026 8.535 8.535 0 0 0-1.438-1.148l2.74-6.924-1.208-1.209-5.127 12.954a.764.764 0 0 0 .16.826.764.764 0 0 0 .825.16l12.955-5.128-1.209-1.209zM36.949 11.929L32.07 7.051a2.87 2.87 0 0 0-2.029-.841c-.734 0-1.469.28-2.029.841l-15.8 15.803 8.937 8.937L33.56 19.377l3.39-3.39a2.869 2.869 0 0 0-.001-4.058zm-10.799.038l2.237 2.238L17.503 25.09l-2.237-2.236L26.15 11.967zm-5.002 16.768l-2.117-2.117 10.885-10.886 2.116 2.116-10.884 10.887z" />
</SvgIcon>
推荐阅读
- machine-learning - tensorflow object-detection api中的数据集类型是什么?
- angular - 如何开发一个简单的网站,在 javascript 中每 3 秒显示一次肯定的肯定
- node.js - 如何将 HTTP POST 请求从 localhost 发送到运行在 AWS EC2 实例上的 nodemailer
- spring - Java Spring JPA 转换为 myBatis
- java - 如何将java输出解析为CSV文件
- html - 当子 div 具有特定的 className 时如何向父 div 添加样式
- loops - 将函数应用于拆分数据集
- python - 如何在 Python 中重新评估变量的值?
- r - 如何在数据框中有效地存储来自变量和因子水平的不同组合的计算?
- flutter - 我想从 FireStore 获取字段数据