0

As the title states I'm trying to test for a null return value on a react component.

I have tried the solution here, but code coverage is saying we haven't properly tested for line 7: return null. What am I missing here?

Component:

import React from 'react';
import { func, bool } from 'prop-types';
import CloudyAlert from '../../assets/alert_cloud.svg';

const Alert = props => {
  if (!props.show) {
    return null;
  }
  return (
    <div onClick={props.onDismiss} className="alert">
      <img src={CloudyAlert} alt="alert to let you know time is up" />
      <button>Ok</button>
    </div>
  );
};

Alert.propTypes = {
  onDismiss: func.isRequired,
  show: bool
};

export default Alert;

Test:

import React from 'react';
import Enzyme from 'enzyme';
import Alert from '../Alert';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';

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

describe('Alert', () => {
  it('renders when show is true', () => {
    let wrapper = mount(<Alert onDismiss={jest.fn()} show />);

    it('renders correctly', () => {
      expect(toJson(wrapper)).toMatchSnapshot();
    });

    it('shows alert when start is clicked and time is zero', () => {
      expect(wrapper.find('Alert').props().show).toBe(true);
    });

    it('does not show alert when show is false', () => {
      wrapper = shallow(<Alert show={false} />);
      expect(wrapper.type()).toEqual(null);
    });
  });
});
RobC
  • 22,977
  • 20
  • 73
  • 80
max_im
  • 31
  • 1
  • 6

1 Answers1

0

Solved: the relevant test was nested in another 'it' block

max_im
  • 31
  • 1
  • 6