У меня ошибка при тестировании компонента, когда на нем есть 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 (Takeобратите внимание, я сократил реальный код, но, несмотря на это, он не работает. Это рабочий миксин.
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"
}
}