Updating SentryBoundary to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 13:18:29 -04:00
parent 092fd39da6
commit e29b40990c
2 changed files with 43 additions and 16 deletions

View File

@ -1,7 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SentryBoundary error handling 1`] = `<Child />`; exports[`SentryBoundary error handling 1`] = `
<DocumentFragment>
Example content
</DocumentFragment>
`;
exports[`SentryBoundary error handling 2`] = `<withI18nextTranslation(SentryError) />`; exports[`SentryBoundary error handling 2`] = `
<DocumentFragment>
<span
data-component="withI18nextTranslation(SentryError)"
data-props="{}"
/>
</DocumentFragment>
`;
exports[`SentryBoundary rendering 1`] = `"Example content"`; exports[`SentryBoundary rendering 1`] = `
<DocumentFragment>
Example content
</DocumentFragment>
`;

View File

@ -1,41 +1,53 @@
jest.mock('@sentry/browser'); jest.mock('@sentry/browser');
jest.mock('components/SentryError', () =>
require('__mocks__/component-mock')('components/SentryError'));
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render } from 'react-testing-library';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import SentryBoundary from 'components/SentryBoundary'; import SentryBoundary from 'components/SentryBoundary';
describe('SentryBoundary', () => { describe('SentryBoundary', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<SentryBoundary> <SentryBoundary>
Example content Example content
</SentryBoundary> </SentryBoundary>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('error handling', () => { test('error handling', () => {
const Child = () => 'Example content'; // Hide React's console logging about the error
const component = shallow( jest.spyOn(console, 'error').mockImplementation(() => {});
<SentryBoundary>
<Child />
</SentryBoundary>
);
expect(component).toMatchSnapshot();
const error =new Error('Example error'); const error =new Error('Example error');
component.find('Child').simulateError(error); const Child = ({ shouldThrow }) => {
// NOTE: Enzyme doesn't call getDerivedStateFromError yet, so we have to if (shouldThrow) {
// set the state manually throw error;
component.setState(SentryBoundary.getDerivedStateFromError(error)); }
return 'Example content';
};
const { asFragment, rerender } = render(
<SentryBoundary>
<Child shouldThrow={ false } />
</SentryBoundary>
);
expect(asFragment()).toMatchSnapshot();
rerender(
<SentryBoundary>
<Child shouldThrow={ true } />
</SentryBoundary>
);
const scope = { setExtra: jest.fn() }; const scope = { setExtra: jest.fn() };
expect(Sentry.withScope).toHaveBeenCalled(); expect(Sentry.withScope).toHaveBeenCalled();
Sentry.withScope.mock.calls[0][0](scope); Sentry.withScope.mock.calls[0][0](scope);
expect(Sentry.captureException).toHaveBeenCalledWith(error); expect(Sentry.captureException).toHaveBeenCalledWith(error);
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
}); });