Add react testing library, wrapper for redux store provider, and impl…

…ement an input test

package.json

@@ -6,6 +6,10 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "@testing-library/dom": "^8.11.0",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.21",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.3",

src/features/_global/test-utils.jsx

@@ -0,0 +1,23 @@
+// https://testing-library.com/docs/react-testing-library/setup/
+// https://redux.js.org/usage/writing-tests#components
+
+import React from 'react'
+import {render as rtlRender } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { store } from './redux/store';
+
+const render = (
+  ui,
+  {
+    preloadedState,
+    ...renderOptions
+  } = {}
+) => {
+  const Wrapper = ({ children }) => {
+    return <Provider store={store}>{children}</Provider>
+  }
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions})
+}
+
+export * from '@testing-library/react';
+export { render }

src/features/book/components/book-form/__test__/book-form.test.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, screen } from '../../../../_global/test-utils'
+import BookForm from '../book-form.component'
+
+describe('BookForm', () => {
+  it('should render BookForm', async () => {
+    render(
+      <BookForm />
+    )
+    const inputElement = screen.getByPlaceholderText('name');
+    expect(inputElement).toBeInTheDocument()
+  })
+})

src/features/book/components/book-form/book-form.component.tsx

@@ -12,6 +12,7 @@ import { selectStartAddress, selectEndAddress, selectLoading, selectAlertSuccess
 } from '../../redux/book.selectors';
 
 import { submitForm  } from '../../redux/book.actions';
+import { bindActionCreators } from 'redux';
 
 interface ActionCreators {
   submitForm: (obj: FormFields) => any,
@@ -58,6 +59,8 @@ const bookFormReducer = (state: FormFields, action: Action) => {
   }
 }
 
+type TaxiFormProps = ActionCreators & ReduxProps;
+
 const TaxiForm = ({ 
   // action creators
   submitForm,
@@ -66,7 +69,7 @@ const TaxiForm = ({
   alertSuccess,
   startAddress, 
   endAddress,
-} : ActionCreators & ReduxProps) : React.ReactElement => {
+} : TaxiFormProps) : React.ReactElement => {
   const [values, dispatch] = React.useReducer(bookFormReducer, initialFormFields);
 
   const handleChange = (name: string, value: string) => {
@@ -114,7 +117,7 @@ const TaxiForm = ({
         </FormGroup>
 
         {/*  EMAIL */}
-        <FormGroup form>
+        <FormGroup>
           <Label for="exampleEmail">Email: <span className="text-flat-orange small ml-2">required</span></Label>
           <Input
             type="email"

src/index.js

@@ -19,6 +19,7 @@ ReactDOM.render(
         </PersistGate>
       </Router>
     </Provider>
-  ), document.getElementById('root'));
+  ), document.getElementById('root')
+);
 
 serviceWorker.register();

src/setupTests.js

@@ -1,6 +1,12 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+// import { configure } from 'enzyme';
+// import Adapter from 'enzyme-adapter-react-16';
 
-configure({
-  adapter: new Adapter()
-})
+// configure({
+//   adapter: new Adapter()
+// })
+
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';