├── .babelrc
├── .gitignore
├── README.md
├── examples
    ├── Button
    │   ├── Button.react.js
    │   └── Button.test.js
    ├── NavBar
    │   ├── NavBar.actions.js
    │   ├── NavBar.actions.test.js
    │   ├── NavBar.constants.js
    │   ├── NavBar.reducer.js
    │   └── NavBar.reducer.test.js
    ├── README.md
    └── add
    │   ├── add.js
    │   └── add.test.js
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Testing React Applications Examples
 2 | 
 3 | This repo showcases how to test various parts of a common React/Redux app using Mocha, `expect` and `enzyme`. You can see a guide using these examples over in the [`react-boilerplate` docs](https://github.com/mxstbr/react-boilerplate/blob/e5eeffb311b82a4a538a4d6e6d7e6a227d3d0ea6/docs/testing/README.md)!
 4 | 
 5 | > These are the examples of a talk I held at the Vienna React.js Meetup about "Testing React.js Applications"!
 6 | 
 7 | ## Setup
 8 | 
 9 | 1. `git clone git@github.com:mxstbr/react-testing`
10 | 
11 | 2. `cd react-testing`
12 | 
13 | 3. `npm install`
14 | 
15 | ## Structure
16 | 
17 | ```rb
18 | 
19 | examples/
20 | ├── add       # Simple example of a unit test
21 | ├── NavBar    # Redux actions and reducer tests
22 | └── Button    # React component tests
23 | ```
24 | 
25 | ## Trying the tests
26 | 
27 | There's a bunch of commands to run different test "classes". The main command is
28 | 
29 | ### Run all tests
30 | 
31 | Run the entire test suite.
32 | 
33 | ```
34 | $ npm run test
35 | ```
36 | 
37 | ### Other commands
38 | 
39 | - `$ npm run test:function`: Run the pure function tests
40 | 
41 | - `$ npm run test:actions`: Run the action tests
42 | 
43 | - `$ npm run test:reducer`: Run the reducer tests
44 | 
45 | - `$ npm run test:redux`: Run both reducer and action tests
46 | 
47 | - `$ npm run test:component`: Run the component tests
48 | 
49 | - `$ npm run test:react`: Run all the redux tests and the component tests
50 | 
51 | ## License
52 | 
53 | The MIT License (MIT)
54 | 
55 | Copyright (c) 2016 Maximilian Stoiber
56 | 
57 | Permission is hereby granted, free of charge, to any person obtaining a copy
58 | of this software and associated documentation files (the "Software"), to deal
59 | in the Software without restriction, including without limitation the rights
60 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
61 | copies of the Software, and to permit persons to whom the Software is
62 | furnished to do so, subject to the following conditions:
63 | 
64 | The above copyright notice and this permission notice shall be included in all
65 | copies or substantial portions of the Software.
66 | 
67 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
68 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
69 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
70 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
71 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
72 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
73 | SOFTWARE.
74 | 


--------------------------------------------------------------------------------
/examples/Button/Button.react.js:
--------------------------------------------------------------------------------
 1 | // Button.react.js
 2 | import React from 'react';
 3 | 
 4 | class Button extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <button className="btn"
 8 |               onClick={this.props.onClick}>
 9 |         { this.props.children }
10 |       </button>
11 |     );
12 |   }
13 | }
14 | export default Button;
15 | 


--------------------------------------------------------------------------------
/examples/Button/Button.test.js:
--------------------------------------------------------------------------------
 1 | // Button.test.js
 2 | 
 3 | import Button from './Button.react';
 4 | import expect from 'expect';
 5 | import { shallow } from 'enzyme';
 6 | import React from 'react';
 7 | 
 8 | describe('<Button />', () => {
 9 |   it('renders a <button>', () => {
10 |     const renderedComponent = shallow(
11 |       <Button></Button>
12 |     );
13 | 
14 |     expect(
15 |       renderedComponent.find("button").node
16 |     ).toExist();
17 |   });
18 | 
19 |   it('renders text', () => {
20 |     const text = "Click me!";
21 |     const renderedComponent = shallow(
22 |       <Button>{ text }</Button>
23 |     );
24 | 
25 |     expect(
26 |       renderedComponent.contains(text)
27 |     ).toEqual(true);
28 |   });
29 | 
30 |   it('handles clicks', () => {
31 |     const onClickSpy = expect.createSpy();
32 |     const renderedComponent = shallow(
33 |       <Button onClick={onClickSpy} />
34 |     );
35 | 
36 |     renderedComponent.find('button').simulate('click');
37 | 
38 |     expect(onClickSpy).toHaveBeenCalled();
39 |   });
40 | });
41 | 


--------------------------------------------------------------------------------
/examples/NavBar/NavBar.actions.js:
--------------------------------------------------------------------------------
1 | // NavBar.actions.js
2 | 
3 | import { TOGGLE_NAV } from './NavBar.constants.js';
4 | 
5 | export function toggleNav() {
6 |   return { type: TOGGLE_NAV };
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/NavBar/NavBar.actions.test.js:
--------------------------------------------------------------------------------
 1 | // NavBar.actions.test.js
 2 | 
 3 | import { toggleNav } from './NavBar.actions';
 4 | import { TOGGLE_NAV } from './NavBar.constants';
 5 | import expect from 'expect';
 6 | 
 7 | describe('NavBar actions', () => {
 8 |   describe('toggleNav', () => {
 9 |     it('should return the correct constant', () => {
10 |       expect(toggleNav()).toEqual({
11 |         type: TOGGLE_NAV
12 |       });
13 |     });
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/examples/NavBar/NavBar.constants.js:
--------------------------------------------------------------------------------
1 | export const TOGGLE_NAV = 'TOGGLE_NAV';
2 | 


--------------------------------------------------------------------------------
/examples/NavBar/NavBar.reducer.js:
--------------------------------------------------------------------------------
 1 | // NavBar.reducer.js
 2 | 
 3 | import { TOGGLE_NAV } from './NavBar.constants.js';
 4 | 
 5 | const initialState = {
 6 |   open: false
 7 | };
 8 | 
 9 | export default function NavBarReducer(state = initialState, action) {
10 |   switch (action.type) {
11 |     case TOGGLE_NAV:
12 |       return Object.assign({}, state, {
13 |         open: !state.open
14 |       });
15 |     default:
16 |       return state;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/NavBar/NavBar.reducer.test.js:
--------------------------------------------------------------------------------
 1 | // NavBar.reducer.test.js
 2 | 
 3 | import expect from 'expect';
 4 | import NavBarReducer from './NavBar.reducer';
 5 | import { TOGGLE_NAV } from './NavBar.constants';
 6 | import { toggleNav } from './NavBar.actions';
 7 | 
 8 | describe('NavBarReducer', () => {
 9 |   it('returns the initial state', () => {
10 |     expect(NavBarReducer(undefined, {})).toEqual({
11 |       open: false
12 |     });
13 |   });
14 | 
15 |   it('handles the toggleNav action', () => {
16 |     expect(NavBarReducer(undefined, toggleNav())).toEqual({
17 |       open: true
18 |     })
19 |   });
20 | });
21 | 


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # `examples`
2 | 
3 | Here's how these few examples are structured:
4 | 
5 | - `add/`: Showcases what a unit test is by testing a very simple pure function
6 | - `NavBar/`: Showcases testing your redux reducers and actions
7 | - `Button/`: Showcases testing your react components with `enzyme`
8 | 


--------------------------------------------------------------------------------
/examples/add/add.js:
--------------------------------------------------------------------------------
1 | // add.js
2 | 
3 | export function add(x, y) {
4 |   return x + y;
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/add/add.test.js:
--------------------------------------------------------------------------------
 1 | // add.test.js
 2 | 
 3 | import { add } from './add.js';
 4 | import expect from 'expect';
 5 | 
 6 | describe('add()', () => {
 7 |   it('adds two numbers', () => {
 8 |     expect(add(2, 3)).toEqual(5);
 9 |   });
10 | 
11 |   it('doesnt add the third number', () => {
12 |     expect(add(2, 3, 5)).toEqual(add(2, 3));
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unit-testing-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "author": "",
 6 |   "license": "MIT",
 7 |   "dependencies": {
 8 |     "babel": "6.3.26",
 9 |     "babel-core": "6.3.26",
10 |     "babel-preset-es2015": "^6.0.0",
11 |     "babel-preset-react": "6.3.13",
12 |     "babel-preset-stage-2": "^6.0.0",
13 |     "enzyme": "1.3.0",
14 |     "mocha": "2.3.4",
15 |     "react": "0.14.6",
16 |     "react-addons-test-utils": "0.14.6",
17 |     "react-dom": "0.14.6"
18 |   },
19 |   "scripts": {
20 |     "mocha": "mocha --compilers js:babel-core/register",
21 |     "test": "mocha --compilers js:babel-core/register './examples/**/*.test.js'",
22 |     "test:actions": "npm run mocha -- './examples/NavBar/NavBar.actions.test.js'",
23 |     "test:reducer": "npm run mocha -- './examples/NavBar/NavBar.reducer.test.js'",
24 |     "test:component": "npm run mocha -- './examples/Button/Button.test.js'",
25 |     "test:function": "npm run mocha -- './examples/add/add.test.js'",
26 |     "test:redux": "npm run mocha -- './examples/NavBar/*.test.js'",
27 |     "test:react": "npm run mocha -- './examples/{NavBar,Button}/*.test.js'"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------