NuxtJS/VueJS recipe for ava

[sprguillen]

Hello, I'm having an error on my component testing when there is a vue mixin on it

  Uncaught exception in test/specs/Logo.spec.js

  /home/sprguillen/Workspace/unit-test/components/Logo.vue:7

   6:     <div class="Triangle Triangle--four" />
   7:   </div>                                   
   8: </template>                                

  Error: Cannot find module '~/mixins/form-mixin'

Here is my configuration:

setup.js

require('browser-env')()
require('jsdom-global')()
const hooks = require('require-extension-hooks')
const Vue = require('vue')

Vue.config.productionTip = false

window.Date = Date;

hooks('vue').plugin('vue').push();
hooks(['vue', 'js']).plugin('babel').push();

ava.config.js

export default {
  require: [
    "./test/helpers/setup.js"
  ]
}

logo.spec.js

import { mount } from '@vue/test-utils'
import test from 'ava'
import Logo from '../../components/Logo.vue'

test('is a Vue instance', t => {
  const wrapper = mount(Logo)
  t.is(wrapper.isVueInstance(), true)
})

Logo.vue

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

<script>
import FormMixin from '~/mixins/form-mixin'
export default {
  mixins: [FormMixin]
}
</script>


<style>
.VueToNuxtLogo {
  display: inline-block;
  animation: turn 2s linear forwards 1s;
  transform: rotateX(180deg);
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 245px;
}

.Triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.Triangle--one {
  border-left: 105px solid transparent;
  border-right: 105px solid transparent;
  border-bottom: 180px solid #41b883;
}

.Triangle--two {
  top: 30px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 87.5px solid transparent;
  border-right: 87.5px solid transparent;
  border-bottom: 150px solid #3b8070;
}

.Triangle--three {
  top: 60px;
  left: 35px;
  animation: goright 0.5s linear forwards 3.5s;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid #35495e;
}

.Triangle--four {
  top: 120px;
  left: 70px;
  animation: godown 0.5s linear forwards 3s;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 60px solid #fff;
}

@keyframes turn {
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes godown {
  100% {
    top: 180px;
  }
}

@keyframes goright {
  100% {
    left: 70px;
  }
}
</style>

form-mixin.js (Take note, I shortened the actual code but regardless the point is, it's not working. This is a working mixin).

export default {
  data() {
    return {
      errors: {}
    }
  }
}

I just want ava or vue test-utils to recognize namespaces either using ~/mixins or @/mixins and yes, mixins directory exists and it's inside the root folder similar to components, pages, layouts, test etc.

Finally here is my package.json file:

{
  "name": "unit-test",
  "version": "1.0.0",
  "description": "My amazing Nuxt.js project",
  "author": "The Handsome Boy",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "ava"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.3.4",
    "@nuxtjs/pwa": "^2.6.0"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.27",
    "ava": "^1.0.1",
    "browser-env": "^3.2.5",
    "jsdom-global": "^3.0.2",
    "nodemon": "^1.18.9",
    "require-extension-hooks": "^0.3.3",
    "require-extension-hooks-babel": "^0.1.1",
    "require-extension-hooks-vue": "^2.0.0"
  }
}

[aparajita]

You're missing a bunch of config to make aliases work, ava won't read Nuxt's webpack config:

https://github.com/avajs/ava/blob/master/docs/recipes/babel.md#webpack-aliases
https://github.com/shortminds/babel-plugin-webpack-alias-7

However, it still won't work even with the documented config. The ava Babel pipeline unfortunately calls babel-plugin-webpack-alias-7 before transforming your source code. The alias plugin is looking for require statements, and since your ES6 imports haven't yet been transformed to require calls, no alias resolution takes place.

One option might be to disable ava's Babel pipeline entirely and configure it manually. Haven't tried it (I already lost half a day tracking down the ava bug), we ended up just switching to mocha and got aliases working no problem.

[novemberborn]

The alias plugin is looking for require statements, and since your ES6 imports haven't yet been transformed to require calls, no alias resolution takes place.

The joy of Node.js-style require() calls and ES modules 😄 You could transform the imports earlier by adding the necessary Babel plugin.

Will leave this open as it sounds like our Vue recipe could be improved. @sprguillen @aparajita either of you interested in opening a PR with changes?

[aparajita]

I really wanted ava to work, it looks promising. But we lost a full day trying to get this to work and had to give up. mochapack worked immediately.

I've been an open source maintainer myself so I admire what you're doing. Keep up the good work! And remember that every hour spent on better documentation is 5 hours less of support. 😁

[dnlup]

@aparajita @sprguillen
I made a small plugin to do unit testing in Vue.js projects. If you could give me some feedback it would be nice. I went for the compile with webpack approach.

https://github.com/dnlup/vue-cli-plugin-unit-ava

[vinayakkulkarni]

https://github.com/vinayakkulkarni/nuxt-ava-e2e-unit-testing

Here's an example of Nuxt & Ava (Unit & E2E tests with Coverage)