Nuxt unit + snapshot testing

Vue green + Ava space

Nuxt is great but unit testing is a pain point.

After trying to use Mocha + Karma I found out complicated webpack config was needed. I searched for an alternative and found a great Vue + AVA example of Edd Yerburgh.

I decided to use the example for my Nuxt testing. AVA is great, Nuxt docs use AVA for their E2E testing. In this article I explain how to setup unit and snapshot tests with little config.

I used the recommended starter template of the Nuxt community and added tests.

Setup

Add the following packages:

yarn add ava @vue/test-utils browser-env require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue --dev

add the following file

test/setup.js

This file is the test setup that makes sure browser-env will compile the Vue components correctly.

Extend package with the following AVA and Babel config

package.json

Ava uses babel-register and the test setup to setup tests. All test files located in test/specs will be tested. The custom snapshot location is test/snapshots.

Component

A simple component to test:

components/List.vue

Test for the list component:

test/specs/List.js

The first test is a snapshot test that is stored in test/snapshots. The second test is a unit tests that checks if the item in the li is rendered correctly.

With little config and only 1 test runner (AVA) we can create Unit, Snapshot and E2E tests.

For a full example checkout this github repository: https://github.com/wesssel/nuxt-unit-testing