Replacing enzyme in SentryError tests

This commit is contained in:
Jeff Avallone 2019-03-24 12:15:24 -04:00
parent 143a18807e
commit babab418c7
3 changed files with 40 additions and 28 deletions

View File

@ -1,21 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SentryError rendering 1`] = ` exports[`SentryError rendering 1`] = `
<Message <DocumentFragment>
<span
data-component="Message"
heading="TRANSLATE(An error has occurred)" heading="TRANSLATE(An error has occurred)"
type="error" type="error"
> >
<p> <p>
<Trans> <span
data-component="Trans"
>
This error has been logged. You may also This error has been logged. You may also
<a <a
data-testid="error-report"
href="#error-report" href="#error-report"
onClick={[Function]}
> >
fill out a report fill out a report
</a> </a>
. .
</Trans> </span>
</p> </p>
</Message> </span>
</DocumentFragment>
`; `;

View File

@ -16,7 +16,9 @@ const reportError = event => {
export const SentryError = ({ t }) => ( export const SentryError = ({ t }) => (
<Message type="error" heading={ t('An error has occurred') }> <Message type="error" heading={ t('An error has occurred') }>
<p> <p>
<Trans>This error has been logged. You may also <a href="#error-report" <Trans>This error has been logged. You may also <a
href="#error-report"
data-testid="error-report"
onClick={ reportError }>fill out a report</a>.</Trans> onClick={ reportError }>fill out a report</a>.</Trans>
</p> </p>
</Message> </Message>

View File

@ -1,7 +1,10 @@
jest.mock('@sentry/browser'); jest.mock('@sentry/browser');
jest.mock('components/Message', () =>
require('__mocks__/component-mock')('components/Message'));
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render, fireEvent } from 'react-testing-library';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { mockT } from 'i18n'; import { mockT } from 'i18n';
@ -9,34 +12,36 @@ import { SentryError } from 'components/SentryError';
describe('SentryError', () => { describe('SentryError', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<SentryError t={ mockT }/> <SentryError t={ mockT }/>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
describe('error reporting', () => { describe('error reporting', () => {
test('fill out a report when an event has been logged', () => { test('fill out a report when an event has been logged', () => {
Sentry.lastEventId.mockReturnValue(1); Sentry.lastEventId.mockReturnValue(1);
const component = shallow( const { getByTestId } = render(
<SentryError t={ mockT } /> <SentryError t={ mockT } />
); );
const eventObj = { preventDefault: jest.fn() }; const event = new MouseEvent('click', { bubbles: true });
component.find('a').simulate('click', eventObj); jest.spyOn(event, 'preventDefault');
fireEvent(getByTestId('error-report'), event);
expect(eventObj.preventDefault).toHaveBeenCalled(); expect(event.preventDefault).toHaveBeenCalled();
expect(Sentry.showReportDialog).toHaveBeenCalled(); expect(Sentry.showReportDialog).toHaveBeenCalled();
}); });
test('fill out a report when an event has not been logged', () => { test('fill out a report when an event has not been logged', () => {
Sentry.lastEventId.mockReturnValue(false); Sentry.lastEventId.mockReturnValue(false);
const component = shallow( const { getByTestId } = render(
<SentryError t={ mockT } /> <SentryError t={ mockT } />
); );
const eventObj = { preventDefault: jest.fn() }; const event = new MouseEvent('click', { bubbles: true });
component.find('a').simulate('click', eventObj); jest.spyOn(event, 'preventDefault');
fireEvent(getByTestId('error-report'), event);
expect(eventObj.preventDefault).toHaveBeenCalled(); expect(event.preventDefault).toHaveBeenCalled();
expect(Sentry.showReportDialog).not.toHaveBeenCalled(); expect(Sentry.showReportDialog).not.toHaveBeenCalled();
}); });
}); });