merging latest/same changes in PR StephenGrider/pull/217

Author: andresn

README.md

@@ -5,7 +5,7 @@ This fork contains the following updates as of 3/28/2018:
 - Upgraded to React-Redux 5.
 - Upgraded to Webpack 4.
 - Changed babel preset to 'env': https://www.npmjs.com/package/babel-preset-env
-- Moved from using Mocha/Chai to Jest/Enzyme.
+- Moved from using Mocha/Chai to Jest/Enzyme. Demo test is within src/components/.
 - Package control using Yarn instead of NPM.
 - Added support for JS object rest spread (...destructuring) and class properties.
 

src/components/app.js

@@ -4,11 +4,25 @@ export default class App extends Component {
 
     constructor(props) {
         super(props);
+        this.state = {
+            buttonText: 'Get Started!'
+        };
+        this.handleGetStarted = this.handleGetStarted.bind(this);
+    }
+
+    handleGetStarted() {
+        this.setState({
+            'buttonText': 'Started!'
+        });
     }
 
     render() {
+        const buttonText = this.state.buttonText;
         return (
-            <div>Redux Simple Starter</div>
+            <div>
+                <h1>Redux Simple Starter</h1>
+                <button className="get-started" onClick={this.handleGetStarted}>{buttonText}</button>
+            </div>
         );
     }
 }

src/components/app.test.js

@@ -1,19 +1,36 @@
 import React from 'react';
+import {
+    mountComponentWithRedux
+} from '../../test_helper';
 import App from './app';
-import { shallow } from 'enzyme';
+
 
 describe(
-    'App',
+    'Components::App',
     () => {
+        let component;
+        beforeEach(
+            () => {
+                component = mountComponentWithRedux(App);
+            }
+        );
+        it(
+            'renders',
+            () => {
+                expect(component.exists()).toBe(true);
+            }
+        );
+        it(
+            'renders button',
+            () => {
+                expect(component.find('.get-started').exists()).toBe(true);
+            }
+        );
         it(
-            'renders correctly',
+            'button is clickable',
             () => {
-                // `yarn test`, or `yarn test:watch` to run
-                // More examples here:
-                // https://github.com/vjwilson/enzyme-example-jest/blob/master/src/__tests__/Foo-test.js
-                expect(
-                    shallow(<App />).contains(<div>Redux Simple Starter</div>)
-                ).toBe(true);
+                component.find('.get-started').simulate('click');
+                expect(component.find('.get-started').text()).toEqual('Started!');
             }
         );
     }

test_helper.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { mount } from 'enzyme';
+import reducers from './src/reducers';
+
+function mountComponentWithRedux(
+    ComponentClass,
+    state = {},
+    props = {}
+) {
+  const componentInstance = mount( // produces app by going through full React lifecycle
+    <Provider store={createStore(reducers, state)}>
+      <ComponentClass {...props} />
+    </Provider>
+  );
+  return componentInstance;
+}
+
+export { mountComponentWithRedux };