miraculously got something working with redux-mock-store for testing redux

referenced this blog: https://www.robinwieruch.de/react-connected-component-test

Author: khanniie

client/modules/IDE/components/SketchList.test.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { reduxRender, prettyDOM } from '../../../test-utils';
+import SketchList from './SketchList';
+
+const mockStore = configureStore([thunk]);
+
+const initialTestState = {
+  ide: null,
+  files: [],
+  preferences: {},
+  user: {
+    email: '[email protected]',
+    username: 'happydog',
+    preferences: {},
+    apiKeys: [],
+    verified: 'sent',
+    id: '123456789',
+    totalSize: 0,
+    authenticated: true
+  },
+  project: null,
+  sketches: [
+    {
+      name: 'testsketch1',
+      _id: 'testid1',
+      updatedAt: '2021-02-26T04:58:29.390Z',
+      files: [],
+      createdAt: '2021-02-26T04:58:14.136Z',
+      id: 'testid1'
+    },
+    {
+      name: 'testsketch2',
+      _id: 'testid2',
+      updatedAt: '2021-02-23T17:40:43.789Z',
+      files: [],
+      createdAt: '2021-02-23T17:40:43.789Z',
+      id: 'testid2'
+    }
+  ],
+  search: {
+    collectionSearchTerm: '',
+    sketchSearchTerm: ''
+  },
+  sorting: {
+    field: 'createdAt',
+    direction: 'DESCENDING'
+  },
+  editorAccessibility: {},
+  toast: {},
+  console: [],
+  assets: {},
+  loading: false,
+  collections: []
+};
+
+describe('<Sketchlist />', () => {
+  let container = null;
+  let store;
+  beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    store = mockStore(initialTestState);
+  });
+
+  afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  describe('<SketchListRow />', () => {
+    it('render', () => {
+      let component;
+      // render the component with autosave set to false as default
+      act(() => {
+        component = reduxRender(<SketchList />, { store, container });
+      });
+      console.log(prettyDOM(container));
+    });
+  });
+});

client/test-utils.js

@@ -13,9 +13,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
 
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n-test';
+import rootReducer from './reducers';
 
 // re-export everything
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -30,8 +33,31 @@ Providers.propTypes = {
   children: PropTypes.element.isRequired
 };
 
+function reduxRender(
+  ui,
+  {
+    initialState,
+    store = createStore(rootReducer, initialState),
+    ...renderOptions
+  } = {}
+) {
+  function Wrapper({ children }) {
+    return (
+      <I18nextProvider i18n={i18n}>
+        <Provider store={store}>{children}</Provider>
+      </I18nextProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.element.isRequired
+  };
+
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
 const customRender = (ui, options) =>
   render(ui, { wrapper: Providers, ...options });
 
 // override render method
-export { customRender as render };
+export { customRender as render, reduxRender };

package.json

@@ -124,6 +124,7 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
     "react-test-renderer": "^16.12.0",
+    "redux-mock-store": "^1.5.4",
     "rimraf": "^2.7.1",
     "sass-loader": "^10.1.1",
     "storybook-addon-theme-playground": "^1.2.0",