exercise 06 (without live demo)

Author: Peter Hozak

08-testing-hooks/README.md

@@ -64,10 +64,18 @@ Simplify tests with react-testing-library:
 - replace modification of input value
 
 
-## 05 react-redux
+## 05 mock API data and timers
 > [src/05](src/05)
 
-- existing actions, reducer, ... and simple tests for them
-- add useDispatch, useSelector to component
-- mock the selectors, use dummy dispatch and connect
+Use standard Jest mocking features:
+- mock response from window.fetch
+- mock setTimeout
 
+
+## 06 react-redux
+> [src2/06](src2/06)
+
+[You Might Not Need Redux](https://www.google.com/search?q=you+might+not+need+redux), but if it's already used in the project
+and you want to test a component:
+- mock `useSelector`, `useDispacth` and `connect`
+- or [redux-mock-store](https://github.com/dmitry-zaets/redux-mock-store) (out of scope for today)

08-testing-hooks/src/06/06-solution.js

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react'
+// import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from './react-redux'
+
+const fetchData = (dispatch) => window.fetch('/api/data').then(({ data }) => dispatch({ type: 'DATA_SUCCESS', data }))
+const dataSelector = (state) => state.api13.data
+
+const Main = () => {
+  const { data } = useSelector(dataSelector)
+  const dispatch = useDispatch()
+  useEffect(() => {
+    dispatch(fetchData)
+  }, [dispatch])
+
+  return !data ? ('Loading...') : (
+    <ul>{data.map(({ id }) => <li key={id}>{id}</li>)}</ul>
+  )
+}
+
+export default Main

08-testing-hooks/src/06/06-solution.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Main from './06-solution'
+
+// jest.mock('react-redux', () => ({
+jest.mock('./react-redux', () => ({
+  useDispatch: () => jest.fn(),
+  useSelector: () => ({ data: [{ id: 2 }] }),
+  // useSelector: (selectorFn) => {
+  //   switch (selectorFn.name) {
+  //     case 'dataSelector':
+  //       return { data: [{ id: 2 }] }
+  //   }
+  // },
+  connect: () => (Component) => Component
+}))
+
+test('Main', () => {
+  const { container } = render(<Main />)
+  expect(container.textContent).toBe('2')
+})

08-testing-hooks/src/06/react-redux.js

@@ -0,0 +1,2 @@
+export const useDispatch = () => undefined
+export const useSelector = () => undefined