How to Automate Nuxt.js Deployments With Heroku and CircleCI
By: Michael Bogan
Tags: Nuxtjs, DevOps, Continuous Integration, Programming, Heroku

5. Set Up Automated Testing With CircleCI

Create a new account at CircleCI by clicking on “Log In with GitHub.”

By logging in with GitHub, you authorize CircleCI to access all of your repositories. Within CircleCI’s dashboard, you’ll be able to select which of your GitHub repositories you want CircleCI to monitor.

From the CircleCI projects dashboard, you’ll see your GitHub repository named my-heroku-nuxt-app — click on the “Set Up Project” button to its right.

CircleCI will choose a config template for you to start with (by default, it chooses the “Hello World” template). Shortly, we’ll provide our own CircleCI config file. For now, select “Hello World,” and click on “Start Building.”

This will pop up a modal saying that CircleCI will create a new branch and add this config template to that branch. But we don’t need CircleCI to do this for us, so select “Add Manually.”

We’re told that we’ll need to create a .circleci subfolder in our repository root folder and then add a config.yml to that subfolder. That’s what we’re about to do. We don’t need to download the template config.yml file since we’re going to write our own. So just click on “Start Building.”

When you set up your project for monitoring by CircleCI (and because CircleCI has been authorized to access your GitHub repositories), CircleCI will add a new public key to your GitHub repository’s settings.

CircleCI will immediately execute a workflow for this project. You’ll notice this first build attempt fails. That’s because CircleCI is looking for the config.yml file in the .circleci subfolder of the master branch of your project repository. That file doesn't exist yet, so let’s create it now.

In your project root folder, create a new subfolder called .circleci :

~/app$ mkdir .circleci

In that folder, create a new file named config.yml . We’re going to break this part of the tutorial into two separate parts. First, we’ll configure CircleCI to run our tests. Then, after we get that up and running, we’ll move on to configuring for Heroku deployment.

The contents of config.yml should be the following:

// FILE: ~/app/.circleci/config.yml version: 2.1

jobs:

run-test-suite:

docker:

- image: circleci/node:10.20.0

working_directory: ~/project

steps:

- checkout

- run:

name: Fetch dependencies

command: yarn install --no-progress --non-interactive --silent --pure-lockfile

- run:

name: Run test suite

command: yarn test_ci

- persist_to_workspace:

root: ~/project

paths:

- .

workflows:

test-and-deploy:

jobs:

- run-test-suite

Let’s walk through what the above configuration does:

We define a new job called run-test-suite . This job sets up an environment that supports Node with the version we want. Then, this job executes four steps. It checks out the repository code, installs dependencies, runs the test suite by running yarn test_ci , and then saves the current workspace folder to the machine so other jobs can still access the contents in its current state. Our overall workflow, called test-and-deploy , only has one job in it: run-test-suite .

You may have noticed that CircleCI will call yarn test_ci from within our project folder to run the test suite. But we haven’t defined test_ci in our package.json script commands yet.

We'll define that command with an extra flag that tells Jest to run in continuous integration mode. This affects how Jest handles snapshot tests. Though we don't have any of those in our project right now, you'll want to keep this in mind in case you write snapshot tests for your projects in the future.

Since we’re updating our package.json file, let’s also turn off code=coverage testing when running Jest:

// Excerpt from FILE: ~/app/package.json ...

"scripts": {

"dev": "nuxt",

"build": "nuxt build",

"start": "nuxt start",

"generate": "nuxt generate",

"test": "jest --coverage false",

"test_ci": "yarn test --ci"

},

...

Now, let’s add our new .circleci/config.yml file and our updated package.json file to git staging, and then commit them.

~/app$ git add .

~/app$ git commit -m "Add CircleCI config for testing, update package.json"

We push our new commit to master :

~/app$ git push origin