Reactjs Jest分支覆盖率缺少一个（在每个组件中）

开玩笑的说，我对分支覆盖率的概念非常困惑：我有一个非常简单的组件，我想得到100%的覆盖率。然而，我只能得到3/4个分支，这没有多大意义。这发生在我们应用程序中的每个组件中。丢失的树枝可能是什么？所有这些都是渲染

Card.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import '../../../Styles/Layout.css';
import PropTypes from 'prop-types';

class Card extends Component {
  static propTypes = {
    date: PropTypes.string, // This gets passed in as a string from the API
    slug: PropTypes.string,
    image: PropTypes.string,
    title: PropTypes.string,
    description: PropTypes.string
  };

  render() {
    let date = new Date(this.props.date);
    return (
      <div className="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-margin-bottom">
        <div className="uk-card uk-card-small uk-card-default">
          <div className="uk-card-media-top">
            <Link to={`/blog/${date.getFullYear()}/${date.getMonth()}/${date.getDay()}/${this.props.slug}`}><img id="blog-card-image" src={this.props.image} alt="Calgary" /></Link>
          </div>
          <div className="uk-card-header">
            <div className="uk-grid-small uk-flex-middle" data-uk-grid>
              <div className="uk-width-auto">
                <h3 className="uk-card-title uk-margin-remove-bottom">{this.props.title}</h3>
                <p className="uk-text-meta uk-margin-remove-top">{date.toDateString()}</p>
              </div>
            </div>
          </div>
          <div className="uk-card-body">
            <p>{this.props.description}</p>
          </div>
          <div className="uk-card-footer">
            <Link to={`/blog/${date.getFullYear()}/${date.getMonth()}/${date.getDay()}/${this.props.slug}`} className="uk-button uk-button-text">Read more</Link>
          </div>
        </div>
      </div>
    );
  }
}

export default Card;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
导入“../../Styles/Layout.css”；
从“道具类型”导入道具类型；
类卡扩展组件{
静态类型={
date:PropTypes.string，//它作为字符串从API传入
slug:PropTypes.string，
image:PropTypes.string，
标题：PropTypes.string，
描述：PropTypes.string
};
render（）{
let date=新日期（this.props.date）；
返回(
{this.props.title}
{date.toDateString（）}
{this.props.description}

阅读更多
);
}
}
导出默认卡；

Card.test.js

import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Card from '../../../../Components/Core/Cards/Card';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

describe('Card', () => {
  it('renders without crashing', () => {
    const component = shallow(<Card image="/path/to/img" date="2018-02-08 14:21:36" description="Test description of a blog post" slug="test-slug-blog-post" title="Test slug blog post"/>);
    expect(component).toMatchSnapshot();
  });
});

从“React”导入React；
输入酶，{shall}来自“酶”；
从“../../../../Components/Core/Cards/Card”导入卡；
从'enzyme-Adapter-react-16'导入适配器；
configure（{adapter:newadapter（）}）；
描述（'卡片'，（）=>{
它（'渲染而不崩溃'，（）=>{
常量分量=浅（）；
expect（component.toMatchSnapshot（）；
});
});

编辑：

---

您是否有本地的覆盖结果？它应该表示未覆盖的行。行覆盖率为100%。100%语句12/12 75%分支3/4 100%函数2/2 100%行7/7我想@dcodesmith询问了html文件，jest在其中打印组件，并在每行中添加注释。此文件位于项目的自动创建的

coverage

目录中。看起来像。您能将为

卡
组件生成的覆盖率文件中的屏幕截图添加到您的问题中吗？@AndrewMiroshnichenko，是的，那个。谢谢你的澄清