我对开玩笑分支覆盖的概念非常困惑:我有这个非常简单的组件,我想获得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();
});
});