pmould / cli-react-redux

Redux boilerplate generation with unit tests

cli-react-redux

Table of contents

• Quick Overview
• Install
• Licence

Quick Overview

CLI React Redux generates a project structure to make you able to save time and effort when starting a new React project. Not only does it create the strucure but also you get the initial functionality and tests that help you get started quickly even if you don't have much React experience yet.

After you have created a new react app by using the amazing tool create-react-app, the initial project structure will be generated as following:

.
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

By installing this package, your project structure will be updated as following:

.
├── App.css
├── App.js
├── Navigator.js
├── __tests__
│   ├── App.test.js
│   ├── Navigator.test.js
│   ├── rootReducer.test.js
│   └── rootSaga.test.js
├── containers
│   └── home
│       ├── Home.js
│       ├── __tests__
│       │   ├── Home.test.js
│       │   ├── actionTypes.test.js
│       │   ├── index.test.js
│       │   ├── reducer.test.js
│       │   ├── sagas.test.js
│       │   └── selectors.test.js
│       ├── actionTypes.js
│       ├── index.js
│       ├── reducer.js
│       ├── sagas.js
│       └── selectors.js
├── index.css
├── index.js
├── logo.svg
├── registerServiceWorker.js
├── rootReducer.js
├── rootSaga.js
└── store.js

Install

Create a React project by using react-create-app

$ npx create-react-app my-app

You may want to remove App.js and App.test.js from the src folder:

$ rm App.js
$ rm App.test.js

It is recommended to install yarn

$ npm i -g yarn

Create the main container

$ npx cli-react-redux create firstcontainer Home

Create secondary container(s)

$ npx cli-react-redux create container Second

For now reducer and saga have to be added manually to rootReducer.js and rootSaga.js.

Add required dependencies

$ yarn add axios redux redux-saga react-redux reselect history react-router-dom react-router-redux@next enzyme enzyme-adapter-react-16

Add the following lines to package.json for code coverage

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/src/index.js",
      "<rootDir>/src/setupTests.js",
      "<rootDir>/src/registerServiceWorker.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 0
      }
    },
    "setupFiles": [
      "<rootDir>/src/setupTests.js",
      "<rootDir>/config/polyfills.js"
    ],

Run unit tests

yarn test --coverage

Run

yarn start

e2e aka UI tests

There is also a UI test generated while creating a container. Test resides in e2e folder along with wdio conf file. We're using mocha as a testrunner, hence there's mocha timeout option set. See webdriver.io for more information hot to run and set up UI tests.

If you are fan of testing and QA and would want to know more about available testing technologies and patterns then take a look An Overview of Javascript Testing in 2018

Licence

Licensed under the MIT license.