chore: modernise some tests (#2652)

* test: setup jest snapshots
* test(RefinementListItem): use enzyme
* test(Stats): use enzyme
* test(autoHideContainer): use modern jest
* chore: switch to enzyme
* chore: remove manual jest snapshot setup

Author: Haroenv

package.json

@@ -137,6 +137,9 @@
       "<rootDir>/node_modules/",
       "<rootDir>/dist*",
       "<rootDir>/functional-tests"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
     ]
   },
   "bundlesize": [

src/components/RangeInput/__tests__/RangeInput-test.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import serializer from 'enzyme-to-json/serializer';
 import { RawRangeInput } from '../RangeInput';
 
-expect.addSnapshotSerializer(serializer);
-
 describe('RawRangeInput', () => {
   const defaultProps = {
     min: 0,

src/components/RefinementList/__tests__/RefinementListItem-test.js

@@ -1,53 +1,32 @@
 import React from 'react';
-import { createRenderer } from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 import RefinementListItem from '../RefinementListItem';
-import Template from '../../Template';
-import sinon from 'sinon';
-import expect from 'expect';
-import expectJSX from 'expect-jsx';
-expect.extend(expectJSX);
-describe('RefinementListItem', () => {
-  let renderer;
-  let props;
 
-  beforeEach(() => {
-    props = {
-      facetValue: 'Hello',
-      facetValueToRefine: 'wi',
-      isRefined: false,
-      handleClick: sinon.spy(),
-      itemClassName: 'item class',
-      templateData: { template: 'data' },
-      templateKey: 'item key',
-      templateProps: { template: 'props' },
-      subItems: <div />,
-    };
-    renderer = createRenderer();
-  });
+describe('RefinementListItem', () => {
+  const props = {
+    facetValue: 'Hello',
+    facetValueToRefine: 'wi',
+    isRefined: false,
+    handleClick: jest.fn(),
+    itemClassName: 'item class',
+    templateData: { template: 'data' },
+    templateKey: 'item key',
+    templateProps: { template: 'props' },
+    subItems: <div />,
+  };
 
   it('renders an item', () => {
-    const out = render(props);
-
-    expect(out).toEqualJSX(
-      <div className={props.itemClassName} onClick={props.handleClick}>
-        <Template
-          data={props.templateData}
-          templateKey={props.templateKey}
-          {...props.templateProps}
-        />
-        {props.subItems}
-      </div>
-    );
+    const wrapper = shallow(<RefinementListItem {...props} />);
+    expect(wrapper).toMatchSnapshot();
   });
 
   it('calls the right function', () => {
     const out = render(props);
-    out.props.onClick();
-    expect(props.handleClick.calledOnce).toBe(true);
+    out.simulate('click');
+    expect(props.handleClick).toHaveBeenCalledTimes(1);
   });
 
   function render(askedProps) {
-    renderer.render(<RefinementListItem {...askedProps} />);
-    return renderer.getRenderOutput();
+    return shallow(<RefinementListItem {...askedProps} />);
   }
 });

src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefinementListItem renders an item 1`] = `
+<div
+  className="item class"
+  onClick={[Function]}
+>
+  <Component
+    data={
+      Object {
+        "template": "data",
+      }
+    }
+    template="props"
+    templateKey="item key"
+  />
+  <div />
+</div>
+`;

src/components/Stats/__tests__/Stats-test.js

@@ -1,38 +1,21 @@
 import React from 'react';
-import expect from 'expect';
-import { createRenderer } from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 import { RawStats as Stats } from '../Stats';
-import Template from '../../Template';
-
-import expectJSX from 'expect-jsx';
-expect.extend(expectJSX);
 
 describe('Stats', () => {
-  let renderer;
-
-  beforeEach(() => {
-    renderer = createRenderer();
-  });
-
   it('should render <Template data= />', () => {
-    const out = render();
+    const out = shallow(<Stats {...getProps()} templateProps={{}} />);
+
     const defaultProps = {
       cssClasses: {},
       hasManyResults: true,
       hasNoResults: false,
       hasOneResult: false,
     };
-    expect(out).toEqualJSX(
-      <Template data={getProps(defaultProps)} templateKey="body" />
-    );
+    expect(out.props().data).toMatchObject(defaultProps);
+    expect(out).toMatchSnapshot();
   });
 
-  function render(extraProps = {}) {
-    const props = getProps(extraProps);
-    renderer.render(<Stats {...props} templateProps={{}} />);
-    return renderer.getRenderOutput();
-  }
-
   function getProps(extraProps = {}) {
     return {
       cssClasses: {},

src/components/Stats/__tests__/__snapshots__/Stats-test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stats should render <Template data= /> 1`] = `
+<Component
+  data={
+    Object {
+      "cssClasses": Object {},
+      "hasManyResults": true,
+      "hasNoResults": false,
+      "hasOneResult": false,
+      "hitsPerPage": 10,
+      "nbHits": 1234,
+      "nbPages": 124,
+      "page": 0,
+      "processingTimeMS": 42,
+      "query": "a query",
+    }
+  }
+  templateKey="body"
+/>
+`;

src/decorators/__tests__/__snapshots__/autoHideContainer-test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`autoHideContainer should render autoHideContainer(<TestComponent />) 1`] = `
+<div
+  style={
+    Object {
+      "display": "none",
+    }
+  }
+>
+  <TestComponent
+    hello="son"
+    shouldAutoHideContainer={true}
+  />
+</div>
+`;

src/decorators/__tests__/autoHideContainer-test.js

@@ -1,12 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import expect from 'expect';
-import { createRenderer } from 'react-test-renderer/shallow';
+import { shallow } from 'enzyme';
 import autoHideContainer from '../autoHideContainer';
-import expectJSX from 'expect-jsx';
-expect.extend(expectJSX);
-import sinon from 'sinon';
 
 class TestComponent extends React.Component {
   render() {
@@ -22,16 +18,10 @@ describe('autoHideContainer', () => {
   let props = {};
 
   it('should render autoHideContainer(<TestComponent />)', () => {
-    const renderer = createRenderer();
     props.hello = 'son';
     const AutoHide = autoHideContainer(TestComponent);
-    renderer.render(<AutoHide shouldAutoHideContainer {...props} />);
-    const out = renderer.getRenderOutput();
-    expect(out).toEqualJSX(
-      <div style={{ display: 'none' }}>
-        <TestComponent hello="son" shouldAutoHideContainer />
-      </div>
-    );
+    const out = shallow(<AutoHide shouldAutoHideContainer {...props} />);
+    expect(out).toMatchSnapshot();
   });
 
   describe('props.shouldAutoHideContainer', () => {
@@ -48,16 +38,16 @@ describe('autoHideContainer', () => {
     });
 
     it('creates a component', () => {
-      expect(component).toExist();
+      expect(component).toBeDefined();
     });
 
     it('shows the container at first', () => {
-      expect(container.style.display).toNotEqual('none');
+      expect(container.style.display).not.toEqual('none');
     });
 
     describe('when set to true', () => {
       beforeEach(() => {
-        sinon.spy(component, 'render');
+        jest.spyOn(component, 'render');
         props.shouldAutoHideContainer = true;
         ReactDOM.render(<AutoHide {...props} />, container);
         innerContainer = container.firstElementChild;
@@ -68,7 +58,7 @@ describe('autoHideContainer', () => {
       });
 
       it('call component.render()', () => {
-        expect(component.render.called).toBe(true);
+        expect(component.render).toHaveBeenCalled();
       });
 
       describe('when set back to false', () => {
@@ -78,11 +68,11 @@ describe('autoHideContainer', () => {
         });
 
         it('shows the container', () => {
-          expect(innerContainer.style.display).toNotEqual('none');
+          expect(innerContainer.style.display).not.toEqual('none');
         });
 
         it('calls component.render()', () => {
-          expect(component.render.calledTwice).toBe(true);
+          expect(component.render).toHaveBeenCalledTimes(2);
         });
       });
     });