How to Setup Testing for AdonisJS Apps

In this post I’ll show you how to create a testing environment in which the tests are re-run every-time you hit save on any file.

Also, when working on the .edge template files you’ll want to refresh the browser automatically every time you hit save, I’ll show you also how to do that! Let’s start!

First Step: Installing the libraries

Create the project with

adonis new myproject --yarn

Install AdonisJS testing framework

adonis install @adonisjs/vow

And add vow to the aceProviders in your start/app.js file

const aceProviders = [
.
.
.
  '@adonisjs/vow/providers/VowProvider'
]

Second step: configuring migrations when testing

Now, I like to re-run migrations (that is dropping the tables and creating them again) when testing.

For that, go to the newly created vowfile.js and uncomment the lines

const ace = require('@adonisjs/ace')
.
.
.
await ace.call('migration:run', {}, { silent: true })
.
.
.
await ace.call('migration:reset', {}, { silent: true })

I also like to truncate the tables between each unique test, so add the DatabaseTransactions trait in your test files

'use strict'

const { test, trait } = use('Test/Suite')('Example')

trait('DatabaseTransactions')
test('make sure 2 + 2 is 4', async ({ assert }) => {
  assert.equal(2 + 2, 4)
})

Now, I know… in this test this doesn’t make much sense, since it’s only an example and it’s not interacting with the database. But I wanted to show the syntax that you need to use for your real tests.

Third Step: watching the code for changes

Adonis doesn’t provide an easy way to doing this. So we can use nodemon for this.

Install nodemon like so:

yarn add nodemon

Now you’ll be able to run the tests with

nodemon -x adonis test

Fourth step: running suites individually

Most of the times we don’t want to run all tests. Specially if we have browser tests that take a lot of time.

For that we can use the “–glob” flag to separate the suites we want to run.

First of all, under the test folder create the folders you want. I like creating an api folder and an e2e folder

mkdir test/e2e && mkdir test/api

Then add the following scripts to your package.json

"scripts": {
    "start": "node server.js",
    "test": "node ace test",
    "api-test": "adonis test --glob /**/api/*.js",
    "e2e-test": "adonis test --glob /**/e2e/*.js",
    "api-watch": "nodemon -x npm run api-test",
    "e2e-watch": "nodemon -x npm run e2e-test"
  }

Now you can easily run your suites with npm run api-test or even have them re-run on code changes with npm run api-watch.

The same goes for npm run e2e-test and e2e-watch

Ideally you can create as many folders and glob patterns as you need. These are only the ones I suggest having at least

Fifth Step: Reload the browser on code changes

Now, this doesn’t have much to do with testing or AdonisJS. But it has to do with setting up a fast development environment.

For that, install browser-sync

yarn add browser-sync

And in your server.js file add the following listening function:

const { Ignitor } = require('@adonisjs/ignitor')
const browserSync = require('browser-sync');

new Ignitor(require('@adonisjs/fold'))
  .appRoot(__dirname)
  .fireHttpServer()
  .catch(console.error)
  .then(listening)

function listening() {
  console.log(`Demo server available on http://localhost:3333`);
  if (process.env.NODE_ENV == 'development') {
    browserSync({
      files: ['./**/*.{html,js,css,edge}'],
      online: false,
      open: false,
      port: 3333 + 1,
      proxy: 'localhost:' + '3333',
      ui: false
    });
  }
}

Now, whenever you edit a file with the extensions listed in the files array, the browser will refresh. Just connect to http://localhost:3334 and see for yourself!

Closing thoughts

Thanks for reading! Hope you liked it! If you have any suggestion or correction please send me an email to mikealche at gmail and I’ll correct it!

And remember to subscribe for the mailing list if you want to see more posts like this!