Skip to content

Instantly share code, notes, and snippets.

@WIStudent
Created February 7, 2019 19:44
Show Gist options
  • Save WIStudent/b7fee5d9dcf3a6e57094082eeb63a8d1 to your computer and use it in GitHub Desktop.
Save WIStudent/b7fee5d9dcf3a6e57094082eeb63a8d1 to your computer and use it in GitHub Desktop.
Vuetify + Vue Test Utils + Jest + Stupid sync flag

If you remove {sync: false} from

const _mount = () => mount(TestComponent,  {sync: false});

in component.test.js, the test will break. If you keep it, everything is fine.

module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
import TestComponent from './component.vue';
import {mount} from '@vue/test-utils';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
describe('test', () => {
const _mount = () => mount(TestComponent, {sync: false});
const findForm = (wrapper) => wrapper.find({ref: 'form'});
const findTextField = (wrapper) => wrapper.find({ref: 'textField'});
const nextTickPromise = (wrapper) => new Promise(resolve => wrapper.vm.$nextTick(resolve));
it('should be valid', async () => {
// Given
const wrapper = _mount();
// When
findTextField(wrapper).vm.$emit('input', 'testText');
await nextTickPromise(wrapper);
// Then
expect(findForm(wrapper).vm.value).toEqual(true);
});
it('should ne invalid', () => {
const wrapper = _mount();
expect(findForm(wrapper).vm.value).toEqual(false);
})
});
<template>
<v-form v-model="valid" ref="form">
<v-text-field
v-model="text"
ref="textField"
:rules="rules"/>
</v-form>
</template>
<script>
export default {
data () {
return {
rules: [
(v) => v.length > 0 || 'field required'
],
text: '',
valid: false
}
}
}
</script>
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
{
"name": "vuetify-form",
"version": "1.0.0",
"scripts": {
"test": "jest"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"jest": "^24.1.0",
"vue-jest": "^3.0.2",
"vue-template-compiler": "^2.6.3"
},
"dependencies": {
"vue": "^2.6.3",
"vuetify": "^1.5.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment