Update dynamic HOC to use redux v7 context

Fixes #20

packages/redux-dynostore-core/package.json

@@ -41,7 +41,6 @@
     "core-js": "^3.2.1",
     "cross-env": "^6.0.0",
     "jest": "^24.9.0",
-    "jest-junit": "^8.0.0",
     "redux": "^4.0.4",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3"
@@ -51,18 +50,16 @@
     "build": "rollup -c",
     "lint": "eslint . --ext .js --ext .jsx",
     "lint:fix": "eslint . --ext .js --ext .jsx --fix",
-    "test": "cross-env JEST_JUNIT_OUTPUT=./test-reports/unit-test-output.xml jest --coverage --colors",
+    "test": "jest",
     "test:watch": "npm test -- --watch",
     "prepublish": "npm run build"
   },
   "jest": {
+    "collectCoverage": true,
+    "coverageDirectory": "./coverage/",
     "collectCoverageFrom": [
       "**/src/**"
     ],
-    "reporters": [
-      "default",
-      "jest-junit"
-    ],
     "testURL": "http://localhost/"
   }
 }

packages/redux-dynostore-react-redux-subspace/package.json

@@ -38,17 +38,15 @@
     "@babel/preset-react": "^7.0.0",
     "@redux-dynostore/core": "^2.0.0",
     "@redux-dynostore/react-redux": "^2.0.0",
+    "@testing-library/react": "^9.1.4",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "core-js": "^3.2.1",
     "cross-env": "^6.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "jest": "^24.9.0",
-    "jest-junit": "^8.0.0",
     "raf": "^3.4.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -63,19 +61,16 @@
     "build": "rollup -c",
     "lint": "eslint . --ext .js --ext .jsx",
     "lint:fix": "eslint . --ext .js --ext .jsx --fix",
-    "test": "JEST_JUNIT_OUTPUT=./test-reports/unit-test-output.xml jest --coverage --colors",
+    "test": "jest",
     "test:watch": "npm test -- --watch",
     "prepublish": "npm run build"
   },
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/test-config/jest-setup.js",
+    "collectCoverage": true,
+    "coverageDirectory": "./coverage/",
     "collectCoverageFrom": [
       "**/src/**"
     ],
-    "reporters": [
-      "default",
-      "jest-junit"
-    ],
     "testURL": "http://localhost/"
   }
 }

packages/redux-dynostore-react-redux-subspace/test/integration.test.js

@@ -10,7 +10,7 @@ import React from 'react'
 import { createStore } from 'redux'
 import { Provider, connect } from 'react-redux'
 import { SubspaceProvider } from 'react-redux-subspace'
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import dynostore from '@redux-dynostore/core'
 import dynamic from '@redux-dynostore/react-redux'
@@ -58,14 +58,14 @@ describe('integration tests', () => {
 
   test('should create subspaced enhanced component', () => {
     const SubspacedComponent = dynamic('testId', subspaced())(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>nested value</p>')
+    expect(getByText('nested value')).toBeDefined()
   })
 })

packages/redux-dynostore-react-redux-subspace/test/subspaced.test.js

@@ -11,7 +11,7 @@ import { createStore } from 'redux'
 import configureStore from 'redux-mock-store'
 import { Provider, connect } from 'react-redux'
 import { SubspaceProvider } from 'react-redux-subspace'
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import dynostore from '@redux-dynostore/core'
 import dynamic from '@redux-dynostore/react-redux'
@@ -69,15 +69,15 @@ describe('subspaced tests', () => {
 
   test('should create subspaced enhanced component', () => {
     const SubspacedComponent = subspaced()('testId')(store)(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>nested value</p>')
+    expect(getByText('nested value')).toBeDefined()
 
     const actions = store.getActions()
     expect(actions.length).toEqual(1)
@@ -91,15 +91,15 @@ describe('subspaced tests', () => {
         mapDispatchToProps
       )(TestComponent)
     )
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId.testId} namespace="parentId/testId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>nested value</p>')
+    expect(getByText('nested value')).toBeDefined()
 
     const actions = store.getActions()
     expect(actions.length).toEqual(1)
@@ -116,15 +116,15 @@ describe('subspaced tests', () => {
     store.dynostoreOptions = { stateHandler }
 
     const SubspacedComponent = subspaced()('testId')(store)(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>override value</p>')
+    expect(getByText('override value')).toBeDefined()
   })
 
   test('should override state handler', () => {
@@ -135,15 +135,15 @@ describe('subspaced tests', () => {
     }
 
     const SubspacedComponent = subspaced({ stateHandler })('testId')(store)(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>override value</p>')
+    expect(getByText('override value')).toBeDefined()
   })
 })
 
@@ -202,15 +202,15 @@ describe('mapExtraState tests', () => {
       })
     )(ConnectedTestComponent)
 
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>extra state value</p>')
+    expect(getByText('extra state value')).toBeDefined()
   })
 
   test('should use default state handler', () => {
@@ -224,15 +224,15 @@ describe('mapExtraState tests', () => {
     store.dynostoreOptions = { stateHandler }
 
     const SubspacedComponent = subspaced({ stateHandler, mapExtraState })('testId')(store)(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>override value</p>')
+    expect(getByText('override value')).toBeDefined()
   })
 
   test('should override state handler', () => {
@@ -244,15 +244,15 @@ describe('mapExtraState tests', () => {
     const mapExtraState = (state, rootState) => ({ extraState: rootState.extraState })
 
     const SubspacedComponent = subspaced({ stateHandler, mapExtraState })('testId')(store)(ConnectedTestComponent)
-    const wrapper = mount(
+    const { getByText } = render(
       <Provider store={store}>
         <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
           <SubspacedComponent />
         </SubspaceProvider>
       </Provider>
     )
 
-    expect(wrapper.html()).toBe('<p>override value</p>')
+    expect(getByText('override value')).toBeDefined()
   })
 
   test('should fail to create subspaced enhanced component with invalid extraState', () => {
@@ -265,7 +265,7 @@ describe('mapExtraState tests', () => {
 
     expect(() =>
       suppressError(() =>
-        mount(
+        render(
           <Provider store={store}>
             <SubspaceProvider mapState={state => state.parentId} namespace="parentId">
               <SubspacedComponent />

packages/redux-dynostore-react-redux/package.json

@@ -39,17 +39,15 @@
     "@babel/plugin-transform-modules-commonjs": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^9.1.4",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "core-js": "^3.2.1",
     "cross-env": "^6.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "jest": "^24.9.0",
-    "jest-junit": "^8.0.0",
     "raf": "^3.4.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -63,19 +61,16 @@
     "build": "rollup -c",
     "lint": "eslint . --ext .js --ext .jsx",
     "lint:fix": "eslint . --ext .js --ext .jsx --fix",
-    "test": "JEST_JUNIT_OUTPUT=./test-reports/unit-test-output.xml jest --coverage --colors",
+    "test": "jest",
     "test:watch": "npm test -- --watch",
     "prepublish": "npm run build"
   },
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/test-config/jest-setup.js",
+    "collectCoverage": true,
+    "coverageDirectory": "./coverage/",
     "collectCoverageFrom": [
       "**/src/**"
     ],
-    "reporters": [
-      "default",
-      "jest-junit"
-    ],
     "testURL": "http://localhost/"
   }
 }

packages/redux-dynostore-react-redux/src/dynamic.js

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { useContext, useMemo } from 'react'
+import { ReactReduxContext } from 'react-redux'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import wrapDisplayName from 'recompose/wrapDisplayName'
 import { createDynamicTarget } from '@redux-dynostore/core'
@@ -16,15 +16,10 @@ const createDynamic = (identifier, enhancers) => {
   const dynamicEnhancer = createDynamicTarget(enhancers)(identifier)
 
   return Component => {
-    class Dynamic extends React.Component {
-      constructor(props, context) {
-        super(props, context)
-        this.EnhancedComponent = dynamicEnhancer(context.store)(Component)
-      }
-
-      render() {
-        return <this.EnhancedComponent identifier={identifier} {...this.props} />
-      }
+    const Dynamic = (props) => {
+      const { store } = useContext(ReactReduxContext)
+      const EnhancedComponent = useMemo(() => dynamicEnhancer(store)(Component), [store])
+      return <EnhancedComponent identifier={identifier} {...props} />
     }
 
     hoistNonReactStatics(Dynamic, Component)
@@ -33,10 +28,6 @@ const createDynamic = (identifier, enhancers) => {
     Dynamic.createInstance = (instanceIdentfier, ...instanceEnhancers) =>
       createDynamic(instanceIdentfier, enhancers.concat(instanceEnhancers))(Component)
 
-    Dynamic.contextTypes = {
-      store: PropTypes.object
-    }
-
     return Dynamic
   }
 }