Jest分支覆盖缺少一个(在每个组件中)

时间:2018-03-27 18:00:58

标签: reactjs enzyme 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;

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();
  });
});

编辑: Here is the requested coverage file

0 个答案:

没有答案