Setting Up Unit Test Cases in NUXT using AVA Framework

Setting Up Unit Test Cases in NUXT using AVA Framework

In large scale application, Unit testing is more important because it is one of the earliest testing efforts performed on the code. Sooner the bugs are detected, sooner they would be fixed and chances are less that they would be transferred over to other places in application. It gives you confidence that you’ve done enough for now and can stop tweaking and move on to the next thing. Unit Tests give you instant visual feedback, we all like the feeling of all those green lights when we’ve done. It’s very satisfying. So We always follow the best practise to write unit test cases on our project.

Today I m writing this blog to setup unit tests on Nuxt Application. Let’s get started with the nuxt starter template using vue-cli. Make sure to have node 8.0+ and npm 5.0+ installed. Let’s Install vue-cli by using following command.

npm install -g @vue/cli

Make sure to use a version of vue-cli >= 2.1 (vue -V). Let’s create a nuxt project from scratch.

$ vue init nuxt-community/starter-template my-project  
$ cd my-project

Install all your dependency and run the application.

$ npm install
$ npm run dev

Now go to localhost:3000 and check whether it works for you.

We have completed Nuxt application setup using vue-cli and Let’s move into  Ava framework. AVA is a powerful JavaScript testing framework, mixed with jsdom, we can use them to do  testing easily.

First, we need to add AVA and jsdom as development dependencies:

npm install --save ava jsdom

Then add a test script to our package.json and configure AVA to compile files that we import into our tests.

Let’s say we have a page in pages/index.vue:

and one component List.vue which takes and array and display list.

When we launch our app with npm run dev and open http://localhost:3000, we can see the output in browser.

Before creating a test case Let’s understand about Ava framework. Ava provides few options

$ ava --help

  Usage
    ava [<file|directory|glob> ...]

  Options
    --watch, -w             Re-run tests when tests and source files change
    --match, -m             Only run tests with matching title (Can be repeated)
    --update-snapshots, -u  Update snapshots
    --fail-fast             Stop after first test failure
    --timeout, -T           Set global timeout
    --serial, -s            Run tests serially
    --concurrency, -c       Max number of test files running at the same time 
    --verbose, -v           Enable verbose output
    --tap, -t               Generate TAP output
    --color                 Force color output
    --no-color              Disable color output

   How to use?
    ava *.js --color --verbose --serial
    ava test.js test2.js
    ava test-*.js --verbose
    ava test

Directories are recursed, with all *.js files being treated as test files. When using npm test , you can pass positional arguments directly npm test test2.js, but flags needs to be passed like npm test --verbose. We can debug in 3 ways this test case: Chrome DevTools, WebStorm, Visual Studio Code

Creating tests

To create a test you call the test function you imported from AVA. Provide the required title and implementation function. Titles must be unique within each test file. The function will be called when your test is run.

import test from 'ava';

test('my passing test', t => {
	t.pass();
});
  • Tests are run concurrently by default, however, sometimes you have to write tests that cannot run concurrently. In these rare cases you can use the .serial modifier. It will force those tests to run serially before the concurrent ones.
  • During development it can be helpful to only run a few specific tests. This can be accomplished using the .only modifier.
  • Sometimes failing tests can be hard to fix. You can tell AVA to skip these tests using the .skip modifier. They’ll still be shown in the output (as having been skipped) but are never run.
  • AVA lets you register hooks that are run before and after your tests. This allows you to run setup and/or teardown code.test.before() registers a hook to be run before the first test in your test file. Similarly test.after() registers a hook to be run after the last test. (for more Info)
  • AVA uses Babel 7 so you can use the latest JavaScript syntax in your tests. There is no extra setup required.
  • AVA comes with built-in support for generator functions and it also provides Async function as well as promise support. Here is Api for more info.

We add our test file test/index.test.js :

In index.test.js before creating test I am initialising nuxt server and setup to localhost:4000 after test I am closing nuxt server, in between I have written three testcase for basic understanding.For running tests you need to do npm test.It will give you output like this.

GIF

Reference:

https://github.com/nuxt-community/starter-template
https://github.com/vuejs/vue-cli
https://github.com/avajs/ava
https://github.com/jsdom/jsdom
https://nuxtjs.org/guide/development-tools#end-to-end-testing



Leave a Reply