vuetify + jest lists error messages although test is green - jestjs

Question

As a vue newbie I wrote a test for a component. The test is green. However, when using vuetify in the component under test (v-layout, v-flex) error messages are listed in the console output. They disappear when removing vuetify in the component (v-layout, v-flex). How can I use vuetify and still avoid those messages?
The component TestForm
<script>
import "#/assets/Styles";
import {cloneDeep} from "lodash";
import VForm from "vuetify/es5/components/VForm";
import VBtn from "vuetify/es5/components/VBtn";
import {VContainer, VContent, VFlex, VLayout, VSpacer} from "vuetify/es5/components/VGrid";
import VTextField from "vuetify/es5/components/VTextField";
import {VCard, VCardText, VCardTitle} from "vuetify/es5/components/VCard";
import TestModelData from "#/api/model/example/TestModelData";
import TestData from "#/api/model/example/TestData";
import TestStatus from "#/api/model/example/TestStatus";
import TestStatusSelect from "#/components/common/TestStatusSelect";
export default {
components: {
VBtn,
VForm,
TestModelData, TestData, TestStatus, TestStatusSelect,
VCard, VCardTitle, VCardText,
VContainer, VContent, VLayout, VFlex, VSpacer,
VTextField
},
props: {
testModelData: TestModelData
},
data() {
return {
currentTestModelData: this.testModelData,
testData: this.testData ? cloneDeep(this.testData) : new TestData()
};
},
watch: {
"testModelData.testdata": function (val) {
console.log("Testdata has changed;", val);
if (val) {
this.testData = cloneDeep(val);
} else {
this.testData = new TestData();
}
}
},
computed: {
readOnly: function () {
if (this.testData.testStatus.id !== TestStatus.FIRST.id) {
return true;
} else {
return false;
}
}
},
methods: {
onFormChange(event) {
console.log("Changed: ", event);
this.$store.dispatch({
type: "testModelData/setTestData",
testData: this.testData
});
}
}
};
</script>
<template>
<v-form ref="form">
<v-layout wrap>
<v-flex xs12 lg6>
<TestStatusSelect
ref="testDataSelect"
v-model="testData.testStatus"
#change="onFormChange($event)"/>
</v-flex>
</v-layout>
</v-form>
<!-- when comment the above and uncomment the below the error messages disappear -->
<!--<v-form ref="form">-->
<!--<TestStatusSelect-->
<!--ref="testDataSelect"-->
<!--v-model="testData.testStatus"-->
<!--#change="onFormChange($event)"/>-->
<!--</v-form>-->
</template>
The jest-test
import VueTestUtils, {createLocalVue, mount} from "#vue/test-utils";
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import TestForm from "#/components/example/TestForm";
import TestModelData from "#/api/model/example/TestModelData";
VueTestUtils.config.provide['$options'] = {};
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Vuetify);
const TEST_MODEL_DATA = TestModelData.fromJSON({
"id": 1,
"testdata": {
"id": 1,
"name": "Foo",
"testStatus": 0,
}
});
describe('TestForm Tests', () => {
test('TestForm select testStatus', () => {
const setTestData = jest.fn();
const getters = {
"current": jest.fn().mockImplementation(() => {
return TEST_MODEL_DATA;
}),
"hasUnsavedChanges": jest.fn().mockReturnValue(false),
};
const store = new Vuex.Store({
modules: {
testModelData: {
namespaced: true,
getters: getters,
actions: {setTestData}
}
}
});
const wrapper = mount(TestForm, {
store, localVue, propsData: {
testModelData: TEST_MODEL_DATA
}
});
const first = wrapper.findAll('.v-list__tile--link').at(1);
first.trigger('click');
expect(setTestData).toHaveBeenCalled();
});
});
The component TestStatusSelect
<script>
import VSelect from "vuetify/es5/components/VSelect";
import TestStatus from "#/api/model/example/TestStatus";
export default {
components: {
VSelect
},
props: ["value", "disabled"],
data() {
return {
testStatuses: TestStatus.ALL,
testStatus: this.value ? this.value : TestStatus.FIRST
};
},
watch: {
value(val) {
if (this.testStatus.id !== val.id) {
console.log('VALUE');
this.testStatus = val;
}
},
testStatus(val, oldVal) {
if (val.id !== oldVal.id) {
this.$emit("input", val);
this.$emit("change", val);
}
}
}
};
</script>
<template>
<v-select
ref="testStatusSelect"
:disabled="disabled"
label="Result"
:items="testStatuses"
item-text="name"
item-value="id"
v-model="testStatus"
return-object>
</v-select>
</template>
The class TestModelData
import TestData from "#/api/model/example/TestData";
class TestModelData {
constructor() {
this.id = null;
this.testData = null;
}
fromJSON(json) {
this.id = json.id;
this.testData = TestData.fromJSON(json.testData);
}
toJSON() {
const o = {
id: this.id,
};
if (this.testData) {
a.testData = this.testData.toJSON();
}
return o;
}
static fromJSON(json) {
if (!json) {
return null;
} else {
const a = new TestModelData();
a.fromJSON(json);
return a;
}
}
}
export default TestModelData;
The class TestData
import TestStatus from "#/api/model/example/TestStatus";
class TestData {
constructor() {
this.id = null;
this.name = null;
this.testStatus = TestStatus.FIRST;
}
fromJSON(json) {
this.id = json.id;
this.name = json.name;
this.testStatus = json.testStatus !== null ? TestStatus.fromJSON(json.testStatus) : null;
}
toJSON() {
const o = {
id: this.id,
};
o.name = this.name;
o.testStatus = this.testStatus ? this.testStatus.toJSON() : null;
return o;
}
static fromJSON(json) {
if (!json) {
return null;
} else {
const a = new TestData();
a.fromJSON(json);
return a;
}
}
}
export default TestData;
The class TestStatus
import PropTypes from "prop-types";
import Definition from "../Definition";
class TestStatus extends Definition {
constructor(id, name) {
super();
this.id = id;
this.name = name;
}
static FIRST = new TestStatus(0, "first");
static SECOND = new TestStatus(1, "second");
static ALL = [
TestStatus.FIRST,
TestStatus.SECOND
];
toJSON() {
return this.id;
}
static fromJSON(json) {
if (json === TestStatus.FIRST.id) {
return TestStatus.FIRST;
}
else if (json === TestStatus.SECOND.id) {
return TestStatus.SECOND;
}
console.error("TestStatus unknown", json);
throw new Error(`TestStatus ${json} unknown`, json);
}
}
TestStatus.prototype.PROPTYPES = {
id: PropTypes.number,
name: PropTypes.string,
};
export default TestStatus;
The console output
console.error node_modules/#vue/test-utils/dist/vue-test-utils.js:15
[vue-test-utils]: an extended child component <VBtn> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
console.error node_modules/#vue/test-utils/dist/vue-test-utils.js:15
[vue-test-utils]: an extended child component <VCard> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
console.error node_modules/#vue/test-utils/dist/vue-test-utils.js:15
[vue-test-utils]: an extended child component <VCardTitle> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
console.error node_modules/#vue/test-utils/dist/vue-test-utils.js:15
[vue-test-utils]: an extended child component <VCardText> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
console.warn node_modules/vuetify/es5/util/console.js:32
[Vuetify] Unable to locate target [data-app]
found in
---> <VMenu>
<VSelect>
<TestStatusSelect>
<VForm>
<VCard>
<Anonymous>
<Root>
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: $listeners is readonly.
found in
---> <VSelect>
<TestStatusSelect>
<VForm>
<VCard>
<Anonymous>
<Root>
console.log src/components/example/TestForm.vue:800
Changed: TestStatus {
_clazz: [Getter/Setter],
id: [Getter/Setter],
name: [Getter/Setter] }
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: $listeners is readonly.
found in
---> <VSelect>
<TestStatusSelect>
<VForm>
<VCard>
<Anonymous>
<Root>
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
found in
---> <VSelect>
<TestStatusSelect>
<VForm>
<VCard>
<Anonymous>
<Root>
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: $listeners is readonly.
found in
---> <VSelect>
<TestStatusSelect>
<VForm>
<VCard>
<Anonymous>
<Root>

Answer 1

There are a few solutions / work arounds in this thread.
This is the one that worked for me, I added it at the top of my test body:
document.body.setAttribute('data-app', true)

Answer 2

find the button by id and triggering a click may occur the warning to resolve this issue consider the below code
let element_forgetBtn = wrapper.find("#forgotPasswordBtn");
> let app = document.createElement("div");
> app.setAttribute("data-app", true);
> document.body.append(app);
element_forgetBtn.trigger("click");
complete code is below
let element_forgetBtn = wrapper.find("#forgotPasswordBtn");
let app = document.createElement("div");
app.setAttribute("data-app", true);
document.body.append(app);
element_forgetBtn.trigger("click");