Added react-testing-library setup and example connected component test

Author: piotrwitek

README.md

@@ -198,7 +198,7 @@ export const FCCounter: React.FC<Props> = props => {
   return (
     <div>
       <span>
-        {label}: {count}{' '}
+        {label}: {count}
       </span>
       <button type="button" onClick={handleIncrement}>
         {`Increment`}
@@ -269,7 +269,7 @@ export class ClassCounter extends React.Component<Props, State> {
     return (
       <div>
         <span>
-          {label}: {count}{' '}
+          {label}: {count}
         </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}
@@ -329,7 +329,7 @@ export class ClassCounterWithDefaultProps extends React.Component<
     return (
       <div>
         <span>
-          {label}: {count}{' '}
+          {label}: {count}
         </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}
@@ -732,12 +732,13 @@ import { countersActions, countersSelectors } from '../features/counters';
 import { FCCounter } from '../components';
 
 type OwnProps = {
-  initialCount: number;
+  initialCount?: number;
 };
 
 const mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({
   count:
-    countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
+    countersSelectors.getReduxCounter(state.counters) +
+    (ownProps.initialCount || 0),
 });
 
 export const FCCounterConnectedExtended = connect(
@@ -1569,8 +1570,7 @@ Object.values = () => [];
     "removeComments": true,
     "sourceMap": true
   },
-  "include": ["src", "typings"],
-  "exclude": ["src/**/*.spec.*"]
+  "include": ["src", "typings"]
 }
 
 ```

playground/package-lock.json

@@ -48,9 +48,11 @@
     "@types/react-router-dom": "4.3.1",
     "@types/react-router-redux": "5.0.17",
     "jest": "22.4.3",
+    "jest-dom": "3.0.1",
     "prop-types": "15.6.2",
     "react-docgen-typescript": "1.12.3",
     "react-styleguidist": "8.0.6",
+    "react-testing-library": "5.4.4",
     "ts-jest": "22.4.6",
     "tslint": "5.12.1",
     "tslint-react": "3.6.0",

playground/package.json

@@ -39,7 +39,7 @@ export class ClassCounterWithDefaultProps extends React.Component<
     return (
       <div>
         <span>
-          {label}: {count}{' '}
+          {label}: {count}
         </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}

playground/src/components/class-counter-with-default-props.tsx

@@ -25,7 +25,7 @@ export class ClassCounter extends React.Component<Props, State> {
     return (
       <div>
         <span>
-          {label}: {count}{' '}
+          {label}: {count}
         </span>
         <button type="button" onClick={handleIncrement}>
           {`Increment`}

playground/src/components/class-counter.tsx

@@ -16,7 +16,7 @@ export const FCCounter: React.FC<Props> = props => {
   return (
     <div>
       <span>
-        {label}: {count}{' '}
+        {label}: {count}
       </span>
       <button type="button" onClick={handleIncrement}>
         {`Increment`}

playground/src/components/fc-counter.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { createStore, combineReducers } from 'redux';
+import { Provider } from 'react-redux';
+import { render, fireEvent, cleanup } from 'react-testing-library';
+
+import { FCCounterConnectedExtended as ConnectedCounter } from './fc-counter-connected-extended';
+
+const reducer = combineReducers({
+  counters: combineReducers({
+    reduxCounter: (state = 0, action: any) => {
+      switch (action.type) {
+        case 'counters/INCREMENT':
+          return state + 1; // action: { type: "INCREMENT"; }
+
+        default:
+          return state;
+      }
+    },
+  }),
+});
+
+afterEach(cleanup);
+
+test('can render with redux with defaults', () => {
+  const label = 'Counter 1';
+  const { getByText } = renderWithRedux(<ConnectedCounter label={label} />);
+  fireEvent.click(getByText('Increment'));
+  expect(getByText(RegExp(label)).textContent).toBe(label + ': 1');
+});
+
+test('can render with redux with custom initial state', () => {
+  const label = 'Counter 1';
+  const { getByText } = renderWithRedux(<ConnectedCounter label={label} />, {
+    initialState: { counters: { reduxCounter: 3 } },
+  });
+  fireEvent.click(getByText('Increment'));
+  expect(getByText(RegExp(label)).textContent).toBe(label + ': 4');
+});
+
+// TODO: move to external utils
+// Redux Provider utility
+function renderWithRedux(
+  jsx: JSX.Element,
+  options: { initialState?: object } = {}
+) {
+  const store = createStore(reducer, options.initialState);
+  return {
+    ...render(<Provider store={store}>{jsx}</Provider>),
+    store,
+  };
+}

playground/src/connected/fc-counter-connected-extended.spec.tsx

@@ -5,12 +5,13 @@ import { countersActions, countersSelectors } from '../features/counters';
 import { FCCounter } from '../components';
 
 type OwnProps = {
-  initialCount: number;
+  initialCount?: number;
 };
 
 const mapStateToProps = (state: Types.RootState, ownProps: OwnProps) => ({
   count:
-    countersSelectors.getReduxCounter(state.counters) + ownProps.initialCount,
+    countersSelectors.getReduxCounter(state.counters) +
+    (ownProps.initialCount || 0),
 });
 
 export const FCCounterConnectedExtended = connect(

playground/src/connected/fc-counter-connected-extended.tsx

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "typings"],
+  "exclude": ["src/**/*.spec.*"]
+}

playground/tsconfig.build.json

@@ -31,6 +31,5 @@
     "removeComments": true,
     "sourceMap": true
   },
-  "include": ["src", "typings"],
-  "exclude": ["src/**/*.spec.*"]
+  "include": ["src", "typings"]
 }