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
exports[`SentryError rendering 1`] = `
<Message
heading="TRANSLATE(An error has occurred)"
type="error"
>
<p>
<Trans>
This error has been logged. You may also
<a
href="#error-report"
onClick={[Function]}
<DocumentFragment>
<span
data-component="Message"
heading="TRANSLATE(An error has occurred)"
type="error"
>
<p>
<span
data-component="Trans"
>
fill out a report
</a>
.
</Trans>
</p>
</Message>
This error has been logged. You may also
<a
data-testid="error-report"
href="#error-report"
>
fill out a report
</a>
.
</span>
</p>
</span>
</DocumentFragment>
`;

View File

@ -16,7 +16,9 @@ const reportError = event => {
export const SentryError = ({ t }) => (
<Message type="error" heading={ t('An error has occurred') }>
<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>
</p>
</Message>

View File

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