Enzyme tests demo

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/

package.json

@@ -12,6 +12,7 @@
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
+    "redux-mock-store": "^1.5.4",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2",
     "start-server-and-test": "^1.11.0"

src/App.jsx

@@ -1,31 +1,27 @@
 import React from 'react';
 import { Input, Button, Container, Header } from 'semantic-ui-react'
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
-const App = (props) => {
+const App = () => {
+  const dispatch = useDispatch()
+  const state = useSelector(state => state)
   return (
-    <>
-      <Container>
-        <Header as='h1'>{props.state.greeting}</Header>
-        <Input
-          placeholder='New greeting...'
-          onBlur={(event) => props.dispatch({ type: 'PROPOSE_GREETING', greeting: event.target.value })}
-        />
-        <Button
-          primary
-          onClick={() => props.dispatch({ type: 'CHANGE_GREETING' })}
-        >
-          Change greeting
+    <Container>
+      <Header as='h1'>{state.greeting}</Header>
+      <Input
+        placeholder='New greeting...'
+        onBlur={(event) => dispatch({ type: 'PROPOSE_GREETING', greeting: event.target.value })}
+      />
+      <Button
+        primary
+        onClick={() => dispatch({ type: 'CHANGE_GREETING' })}
+      >
+        Change greeting
         </Button>
-      </Container>
-    </>
+    </Container>
   );
 }
 
-const mapStateToProps = (state) => {
-  return {
-    state: state
-  }
-}
 
-export default connect(mapStateToProps)(App);
+
+export default App;

src/__tests__/App.test.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import App from '../App'
+import configureStore from 'redux-mock-store'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+  useDispatch: jest.fn(),
+}))
+
+describe('<App />', () => {
+  const mockDispatch = jest.fn()
+  const mockStore = configureStore([])
+
+  const store = mockStore({
+    greeting: 'Hello World from Redux',
+    proposed_greeting: '',
+  })
+
+  useSelector.mockReturnValue(store.getState())
+  useDispatch.mockImplementation(() => mockDispatch)
+
+  const subject = mount(<App />)
+
+  it('displays the initial greeting set by redux state', () => {
+    expect(subject.find('h1').text()).toContain('Hello World from Redux')
+  })
+
+  it('uses <Header as="h1"/>', () => {
+    expect(subject.find('Header').prop('as')).toEqual('h1')
+  })
+
+  it('can set PROPOSED_GREETING', () => {
+    subject.find('input').simulate('blur', { target: { value: 'Hello' } })
+    expect(mockDispatch).toHaveBeenCalledWith({
+      greeting: 'Hello',
+      type: 'PROPOSE_GREETING',
+    })
+  })
+  it('calls CHANGE_GREETING', () => {
+    subject.find('button').simulate('click')
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'CHANGE_GREETING',
+    })
+  })
+})

yarn.lock

@@ -7134,6 +7134,11 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9615,6 +9620,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-mock-store@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
+  integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"