jestjs - vuetify + jest 列出了错误消息，尽管 test 是绿色的

Question

作为 vue 新手，我为一个组件编写了一个测试。测试是绿色的。但是，在被测组件(v-layout、v-flex)中使用 vuetify 时，控制台输出中会列出错误消息。在组件(v-layout、v-flex)中移除 vuetify 时，它们会消失。如何使用 vuetify 并仍然避免这些消息？

组件 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>

Jest 测试

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();
  });

});

组件 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>

类 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;

类 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;

类 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;

控制台输出

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

this thread 中有一些解决方案/变通方法.

这是对我有用的，我将它添加到了我的测试主体的顶部:

document.body.setAttribute('data-app', true)