chore: use jest serializer for enzyme-to-json (#5797)

* Use jest serializer for enzyme-to-json

Author: billyvg

package.json

@@ -81,6 +81,7 @@
     "lint": "node_modules/.bin/eslint tests/js src/sentry/static/sentry/app --ext .jsx"
   },
   "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"],
     "modulePaths": [
       "<rootDir>/src/sentry/static/sentry"
     ],

tests/js/spec/components/customResolutionModal.spec.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import CustomResolutionModal from 'app/components/customResolutionModal';
 
@@ -15,7 +14,7 @@ describe('CustomResolutionModal', function() {
           onSelected={() => false}
         />
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/detailedError.spec.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import DetailedError from 'app/components/errors/detailedError';
 
@@ -10,7 +9,7 @@ describe('DetailedError', function() {
       <DetailedError heading="Error heading" message={<div>Message</div>} />
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('renders with "Retry" button', function() {
@@ -22,7 +21,7 @@ describe('DetailedError', function() {
       />
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('can hide support links', function() {
@@ -35,7 +34,7 @@ describe('DetailedError', function() {
       />
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('hides footer when no "Retry" and no support links', function() {
@@ -47,6 +46,6 @@ describe('DetailedError', function() {
       />
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot();
   });
 });

tests/js/spec/components/forms/booleanField.spec.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {BooleanField} from 'app/components/forms';
 
 describe('BooleanField', function() {
   describe('render()', function() {
     it('renders without form context', function() {
       let wrapper = shallow(<BooleanField name="fieldName" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -22,7 +21,7 @@ describe('BooleanField', function() {
           }
         }
       });
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/emailField.spec.jsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {EmailField} from 'app/components/forms';
 
 describe('EmailField', function() {
   describe('render()', function() {
     it('renders', function() {
       let wrapper = shallow(<EmailField name="fieldName" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value', function() {
       let wrapper = shallow(<EmailField name="fieldName" value="[email protected]" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -27,7 +26,7 @@ describe('EmailField', function() {
           }
         }
       });
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/form.spec.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {Form} from 'app/components/forms';
 
 describe('Form', function() {
   describe('render()', function() {
     it('renders with children', function() {
       let wrapper = shallow(<Form onSubmit={() => {}}><hr /></Form>);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/multipleCheckboxField.spec.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {MultipleCheckboxField} from 'app/components/forms';
 
@@ -14,7 +13,7 @@ describe('MultipleCheckboxField', function() {
           value={['1']}
         />
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -31,7 +30,7 @@ describe('MultipleCheckboxField', function() {
           }
         }
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/numberField.spec.jsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {NumberField} from 'app/components/forms';
 
 describe('NumberField', function() {
   describe('render()', function() {
     it('renders', function() {
       let wrapper = shallow(<NumberField name="fieldName" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with optional attributes', function() {
       let wrapper = shallow(<NumberField name="fieldName" min={0} max={100} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value', function() {
       let wrapper = shallow(<NumberField name="fieldName" value={5} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -32,7 +31,7 @@ describe('NumberField', function() {
           }
         }
       });
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/passwordField.spec.jsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {PasswordField} from 'app/components/forms';
 
 describe('PasswordField', function() {
   describe('render()', function() {
     it('renders', function() {
       let wrapper = shallow(<PasswordField name="fieldName" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value', function() {
       let wrapper = shallow(<PasswordField name="fieldName" value="foobar" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -27,7 +26,7 @@ describe('PasswordField', function() {
           }
         }
       });
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });

tests/js/spec/components/forms/rangeField.spec.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import toJson from 'enzyme-to-json';
 
 import {RangeField} from 'app/components/forms';
 
 describe('RangeField', function() {
   describe('render()', function() {
     it('renders', function() {
       let wrapper = shallow(<RangeField name="fieldName" />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with optional attributes', function() {
@@ -22,12 +21,12 @@ describe('RangeField', function() {
           allowedValues={[1, 2, 3]}
         />
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value', function() {
       let wrapper = shallow(<RangeField name="fieldName" value={2} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
@@ -41,7 +40,7 @@ describe('RangeField', function() {
           }
         }
       });
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });