时间戳

首页 > 解决方案 > React Jest 测试覆盖显示未经测试的行（默认道具）

reactjs - React Jest 测试覆盖显示未经测试的行（默认道具）

问题描述

我正在对简单的按钮组件进行测试。一切正常，但是，在测试覆盖率中，我得到了一条未经测试的行 (21: onClick: () => { return true })。这条线指向默认的 props 函数。我如何确保我已经涵盖了这一行的单元测试？

我的组件：

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

export const Button = (props) => {
  return (
    <Link 
      to={props.link} 
      className={props.classes}
      onClick={props.onClick}
    >
      {props.title}
    </Link>
  );
};

Button.defaultProps = {
  link: '/',
  title: 'Home',
  classes: 'btn btn--primary',
  onClick: () => { return true }
}

Button.propTypes = {
  link: PropTypes.string,
  title: PropTypes.string,
  classes: PropTypes.string,
  onClick: PropTypes.func
};

export default Button;

我的测试：

import React from 'react';
import { shallow } from 'enzyme';
import { Button } from '../../../components/partials/Button';

test('should render button', () => {

  const wrapper = shallow(<Button link='/test' title='Home' classes='btn btn--primary' onClick={ () => { return true }} />);
  expect(wrapper).toMatchSnapshot();
  const props = wrapper.props();
  expect(props.to).toBe('/test');
  expect(props.className).toBe('btn btn--primary');
  expect(props.onClick).toBe(props.onClick);
  expect(props.children).toBe('Home');
});


test('should have default onClick', () => {
  expect(Button.defaultProps.onClick).toBeDefined();
});

标签： reactjsjestjs

解决方案

您需要运行该onClick函数才能使其计入覆盖范围。所以，做一个模拟按钮上的点击事件的测试，这将触发它的onClick功能：

it('does something when clicked', () => {
    const wrapper = shallow(<Button link='/test' title='Home' classes='btn btn--primary' onClick={ () => { return true }} />);

    wrapper.simulate('click');
    expect(...);
});

推荐阅读