circleci-deployment ⚫ 🚀 👽 🤘

Read the article on Medium.

Notes

1. React 16 Environment

With the React 16 the requirement of some polyfills are needed for production and testing environments. Read more here and in the original gist. This is why the raf package has been included and the reasoning behind src/setupTests.js (read more about that in the official create-react-app docs here).

2. Jest Snapshot Testing on Continuous Integration

The test:coverage script has the --updateSnapshot flag because jest no longer explicitly updates the snapshots, read more here (I know we are doing no snapshot tests in this, but it's worth noting this).

3. Jest configuration with create-react-app

Barring running a yarn eject to be able to have more control these are the limitations you will run into at the time of writing this:

When adding "jest" to the package.json you can only pass the following configuration options (you will get a very pretty error message if you add more):

• collectCoverageFrom
• coverageReporters
• coverageThreshold
• snapshotSerializers

All other options must be passed through the jest CLI flags. A particularly useful flag for seeing the underlying configuration being set by create-react-app is the --showConfig flag that will exit with the output of the configuration. This can be seen by running yarn test:config.

4. Building & Testing create-react-app using Continuous Integration

As per the documentation it is required that for both the build and testing that we pass CI=true.

devDependencies & configurations

• codecov: Read more on codecov here.
• commitizen: Read more on commitizen here.
• cz-conventional-changelog: Read more on cz-conventional-changelog here.
• husky: Read more on husky here.
• lint-staged: Read more on lint-staged here.
• nsp: Read more on nsp here.
• prettier: Read more on prettier here.
• raf: Read more on raf here.

1. With commitizen we must declare the path to the adapter that is going to be used.

2. create-react-app does not look for a jest.config.json so we must declare our configuration in the package.json under the jest object.

3. lint-staged requires us to tell it what files should be looked at in the repository and accepts an array of commands to be executed. It is important to run git add last because we are running lint-staged on the husky managed precommit git hook. If you do not put this command as the last index of the array all files changed by the prettier formating or other scripts in the array will no longer be staged for committing.

4. We can either use a now.json or declare a now config object in the package.json. Here we declare the 3 possible aliases, the only files to be sent to the cloud, and what to name the deployment instance.

5. As per #1 under Notes react@16 requires some polyfills now. raf is added to the /src/setupTests.js file as import 'raf/polyfill'.

{
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "jest": {
    "collectCoverageFrom": ["src/App.js"],
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  },
  "lint-staged": {
    "*.js": ["yarn prettier", "git add"]
  },
  "now": {
    "alias": [
      "circleci-deployment-alpha",
      "circleci-deployment-beta",
      "circleci-deployment-production"
    ],
    "files": ["./build"],
    "name": "circleci-deployment"
  },
}