import React from 'react';
import { mount } from 'enzyme';
import DeleteModal from './delete_modal';

describe('delete modal', () => {
  let result;
  let clicked;
  let props;

  beforeEach(() => {
    clicked = false;
    props = {
      isOpen: true,
      closeModal: () => { clicked = true; },
      deleteRecord: () => { clicked = true; },
    };
    result = mount(<DeleteModal {...props} />);
  });

  it('renders Yes button', () => {
    const button = result.find('.c-btn--red');
    expect(button.props().children).toContain('Yes');
  });

  it('handles the yes button click event', () => {
    expect(clicked).toBeFalsy();
    result.find('.c-btn--red').simulate('click');
    expect(clicked).toBeTruthy();
  });

  it('renders Cancel button', () => {
    const button = result.find('.c-btn--gray--large');
    expect(button.props().children).toBe('Cancel');
  });

  it('handles the yes button click event', () => {
    expect(clicked).toBeFalsy();
    result.find('.c-btn--gray--large').simulate('click');
    expect(clicked).toBeTruthy();
  });
});

import React from 'react';
import ReactDOM from 'react-dom';
import TestRenderer from 'react-test-renderer';
import DeleteModal from './delete_modal';

describe('delete modal', () => {
  let result;
  let instance;
  let clicked;
  let props;

  // https://medium.com/@amanverma.dev/mocking-create-portal-to-utilize-react-test-renderer-in-writing-snapshot-uts-c49773c88acd
  beforeAll(() => {
    ReactDOM.createPortal = jest.fn((element, node) => element);
  });

  afterEach(() => {
    ReactDOM.createPortal.mockClear();
  });

  beforeEach(() => {
    clicked = false;
    props = {
      isOpen: true,
      closeModal: () => { clicked = true; },
      deleteRecord: () => { clicked = true; },
    };
    result = TestRenderer.create(<DeleteModal {...props} />);
    instance = result.root;
  });

  it('renders Yes button', () => {
    const buttons = instance.findAllByType('button');
    const button = buttons.find((b) => b.children[0] === 'Yes');
    expect(!!button).toBe(true);
  });

  it('handles the yes button click event', () => {
    expect(clicked).toBeFalsy();
    const buttons = instance.findAllByType('button');
    const button = buttons.find((b) => b.children[0] === 'Yes');
    button.props.onClick();
    expect(clicked).toBeTruthy();
  });

  it('renders Cancel button', () => {
    const buttons = instance.findAllByType('button');
    const button = buttons.find((b) => b.children[0] === 'Cancel');
    expect(!!button).toBe(true);
  });

  it('handles the cancel button click event', () => {
    expect(clicked).toBeFalsy();
    const buttons = instance.findAllByType('button');
    const button = buttons.find((b) => b.children[0] === 'Cancel');
    button.props.onClick();
    expect(clicked).toBeTruthy();
  });
});

Update react. Remove calls to 'mount' from enzyme
Update react. Remove calls to 'mount' from enzyme
