如何使用Jest + Enzyme涵盖Svg反应组件的测试用例

Question

我相对不熟悉测试。任何帮助/建议表示赞赏。我有这个简单的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();
};

Answer 1

我建议从其他文件导入此行，并将其从测试范围中排除。

<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>