NuxtJS的Vue组件导入别名为ava test-runner和vue-test-utils

Question

当有vue mixin时，我在组件测试中出错

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'

这是我的配置：

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（请注意，我缩短了实际代码，但不管要点是什么，它都无法正常工作。这是一个有效的mixin）。

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

我只希望ava或vue test-utils使用~/mixins或@/mixins来识别名称空间，是的，mixins目录存在并且它位于根文件夹内，类似于组件，页面，布局，测试等。

最后是我的package.json文件：

{
  "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"
  }
}