Add support to tests

README.md

@@ -15,3 +15,7 @@ To run the live server, install the dependencies, then run `npm start` or `yarn
 
 To build for production, install the dependencies, then run `npm run build` or `yarn build`.
 
+### Testing
+
+To run the tests `npm run test`.
+

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start src/index.js",
-    "build": "react-scripts build src/index.js"
+    "build": "react-scripts build src/index.js",
+    "test": "react-scripts test"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
@@ -15,6 +16,8 @@
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.1.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "node-sass": "^4.11.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/Counter.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const Counter = ({increment, incrementIfOdd, incrementAsync, decrement, counter}) => (
-  <p>
-    Clicked: {counter} times
+  <React.Fragment>
+    <p>Clicked: {counter} times</p>
     {' '}
     <button onClick={increment}>+</button>
     {' '}
@@ -12,7 +12,7 @@ const Counter = ({increment, incrementIfOdd, incrementAsync, decrement, counter}
     <button onClick={incrementIfOdd}>Increment if odd</button>
     {' '}
     <button onClick={() => incrementAsync()}>Increment async</button>
-  </p>
+  </React.Fragment>
 )
 
 Counter.propTypes = {

src/components/Counter.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Counter from './Counter';
+
+describe('Counter [Component]', () => {
+  let wrapper;
+
+  const counter = 0;
+  const increment = jest.fn();
+  const decrement = jest.fn();
+  const incrementIfOdd = jest.fn();
+  const incrementAsync = jest.fn();
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <Counter
+        counter={counter}
+        increment={increment}
+        decrement={decrement}
+        incrementIfOdd={incrementIfOdd}
+        incrementAsync={incrementAsync}
+      />
+    );
+  });
+
+  test('Should display 0 as a counter.', () => {
+    const text = wrapper.find('p').text();
+    expect(text).toEqual('Clicked: 0 times');
+  });
+
+  test('Should call increment when the button is clicked.', () => {
+    const btn = wrapper.find('button').at(0);
+    btn.simulate('click');
+
+    expect(increment).toHaveBeenCalled();
+    expect(increment).toHaveBeenCalledTimes(1);
+  });
+
+  test('Should call decrement when the button is clicked.', () => {
+    const btn = wrapper.find('button').at(1);
+    btn.simulate('click');
+
+    expect(decrement).toHaveBeenCalled();
+    expect(decrement).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/App.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import Counter from '../components/Counter'
-import * as CounterActions from '../store/actions'
+import * as CounterActions from '../store/actions/counter'
 
 const mapStateToProps = (state) => ({
   counter: state.counter

src/setupTests.js

@@ -0,0 +1,6 @@
+import { configure } from 'enzyme';
+import React16Adapter from 'enzyme-adapter-react-16';
+
+// Enzyme requires a React version-specific adapter
+// See https://github.com/airbnb/enzyme/tree/master/packages
+configure({ adapter: new React16Adapter() });

src/store/actions/index.js → src/store/actions/counter.js

@@ -29,4 +29,4 @@ export const incrementAsync = (delay = 1000) => dispatch => {
   setTimeout(() => {
     dispatch(increment())
   }, delay)
-}
+}

src/store/actions/counter.test.js

@@ -0,0 +1,48 @@
+import reducer from '../reducers/counter';
+import { set, increment, decrement } from './counter';
+
+describe('Counter [Actions]', () => {
+  let state;
+
+  beforeEach(() => {
+    state = 0;
+  });
+
+  describe('set', () => {
+    test('Should return the initial state.', () => {
+      const result = reducer(undefined, set(0));
+      expect(result).toEqual(0);
+    });
+
+    test('Should set a different value to the state.', () => {
+      const result = reducer(state, set(3));
+      expect(result).toEqual(3);
+    });
+  });
+
+  describe('increment', () => {
+    test('Should increment the state with +1.', () => {
+      const result = reducer(state, increment());
+      expect(result).toEqual(1);
+    });
+
+    test('Should increment the state with +3.', () => {
+      const state = 2;
+      const result = reducer(state, increment());
+      expect(result).toEqual(3);
+    });
+  });
+
+  describe('decrement', () => {
+    test('Should decrement the state to -1.', () => {
+      const result = reducer(state, decrement());
+      expect(result).toEqual(-1);
+    });
+
+    test('Should decrement the state to -3.', () => {
+      const state = -2;
+      const result = reducer(state, decrement());
+      expect(result).toEqual(-3);
+    });
+  });
+});

src/store/reducers/counter.js

@@ -1,4 +1,4 @@
-import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions'
+import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter'
 
 const counter = (state = 0, action) => {
   switch (action.type) {