dialog icon indicating copy to clipboard operation
dialog copied to clipboard

Cannot test with enzyme and jest

Open papuruth opened this issue 4 years ago • 0 comments

Hi, I was trying to test the dialog component but it's not working. Here is my component code

import Toast from '@/utils/Toast';
import PropTypes from 'prop-types';
import Dialog from 'rc-dialog';
import React from 'react';
import enhanceMessage from './enhanceMessage';

function ErrorDialog({ dismissError, error, breakoutFullText }) {
  const { message, code, name } = error || {};
  const enhancedMessage = enhanceMessage(message, code, breakoutFullText, name);
  const styles = {
    dialogContent: {
      display: ' flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    },
  };
  if (code === 53105) {
    Toast.info(breakoutFullText);
    return true;
  }
  return error !== null ? (
    <Dialog
      title="Error"
      className="main-dialog"
      style={{ height: 200, width: 400, top: '20%' }}
      onClose={() => dismissError()}
      visible={error !== null}
      destroyOnClose
      animation="zoom"
      maskAnimation="fade"
      footer={
        <button type="button" className="btn button" key="close" onClick={dismissError}>
          OK
        </button>
      }>
      <div style={styles.dialogContent}>
        <h3>{name === 'NotFoundError' ? 'No camera found' : enhancedMessage}</h3>
        <div>
          {code && code !== 53105 && (
            <pre>
              <code>
                Error Code:
                {code}
              </code>
            </pre>
          )}
        </div>
      </div>
    </Dialog>
  ) : null;
}

Here is my test code

import ErrorDialog from '@/components/TwilioVideoMeeting/ErrorDialog/ErrorDialog';
import { shallow } from 'enzyme';
import Dialog from 'rc-dialog';
import React from 'react';

describe('Testing the ErrorDialog component', () => {
  const message = 'Fake Error message';
 
  it('should display error message but not error code is the later does not exist', () => {
    const error = { message };
    const wrapper = shallow(<ErrorDialog dismissError={() => {}} error={error} />);
    expect(wrapper.find(Dialog).text()).toContain(message);
    expect(wrapper.find('code').exists()).toBe(false);
  });
});

It throws following error the ErrorDialog component › should display error message but not error code is the later does not exist

expect(received).toContain(expected) // indexOf

Expected substring: "Fake Error message"
Received string:    "< />"

Any Help would be appreciated

papuruth avatar May 21 '21 11:05 papuruth