这是我的第一个测试:
Heading.spec.js
import Vuetify from "vuetify";
import { shallowMount, createLocalVue } from "@vue/test-utils";
import router from "@/router";
import i18n from "@/locales";
import Heading from "@/components/Home/Heading.vue";
describe("Heading.vue", () => {
let wrapper;
beforeEach(() => {
const localVue = createLocalVue()
localVue.use(router)
localVue.use(Vuetify)
localVue.filter("translate", function(value) {
if (!value) return "";
value = "lang.views.global." + value.toString();
return i18n.t(value);
});
wrapper = shallowMount(Heading, { localVue: localVue, router, i18n });
});
it("should contains default heading", () => {
console.log ('WRAPPER: ', wrapper)
// const heading = wrapper.find("h1");
// expect(heading.text()).toContain("In the heart of Charentes...");
});
});
当我运行它时,出现Vuetify错误...
console.log
vue-cli-service test:unit
PASS tests/unit/Heading.spec.js (11.247s)
Heading.vue
✓ should contains default heading (462ms)
console.log tests/unit/Heading.spec.js:23
WRAPPER: undefined
console.error node_modules/vuetify/dist/vuetify.js:19429
[Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068
If you're seeing "$attrs is readonly", it's caused by this
console.error node_modules/vuetify/dist/vuetify.js:19429
[Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068
If you're seeing "$attrs is readonly", it's caused by this
console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object.
found in
---> <VParallax>
<Heading>
<Root>
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 17.641s
Ran all test suites.
为什么我会检测到多个Vue实例?在我的测试中定义了一次……就这些了?
测试通过了,但是我不理解Vuetify的错误..感谢您的反馈
修改 webpack.render.config.js:
为:
然后从新npm run dev即可