How To Set Up A Continuous Integration Pipeline with Github and Next.JS

What is Continuous Integration?

Jest test runner in action

Setting Up Your Next.JS Project For CI

npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
yarn add -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
{   
"presets": ["next/babel"]
}

"jest": {
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
"scripts": {
...
"test": "jest"
},
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: Update NPM
command: "sudo npm install -g npm@5"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: Run tests
command: npm run test --passWithNoTests
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: yarn update
command: "sudo npm install -g yarn"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: yarn install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: yarn run tests
command: yarn run test --passWithNoTests

Setting Up With CircleCI

- run:
name: Install Dependencies
//yarn install is the correct syntax also .yml files are white space sensitive which can cause build failures
command: yarn add

What happens now when I create a pull request or push something to the main branch?

A successful pull request passing checks on CircleCI and Vercel — awaiting review

About the Author

  • HTML5
  • JavaScript
  • JQuery
  • CSS3
  • MySQL/PostgreSQL
  • Bootstrap
  • MaterialUI
  • React
  • Redux

--

--

--

www.arlmedia.ca https://github.com/AndrewRLloyd88

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Making Sense of Zeros and Ones in Programming

The Ultimate Beginner’s Guide to Learn node.js

Releasing ensjs and Announcing ENS Integration Workshop

The method that I use to study programmings.

Using ViewPort In Javascript

Learning React with Ben Awad — 09

JavaScript Closures — Plain and Simple

What is Deno? Node.js Vs. Deno

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew Lloyd

Andrew Lloyd

www.arlmedia.ca https://github.com/AndrewRLloyd88

More from Medium

How to make multi-language with react-i18next ?

Cloning eBay’s frontend with the custom-made server

Installation — Electron from zero to hero

React -login-app with mock API