vue-test-utils

问题 Currently, I am implementing unit test for my project and there is a file that contained window.location.href . I want to mock this to test and here is my sample code: it("method A should work correctly", () => { const url = "http://dummy.com"; Object.defineProperty(window.location, "href", { value: url, writable: true }); const data = { id: "123", name: null }; window.location.href = url; wrapper.vm.methodA(data); expect(window.location.href).toEqual(url); }); But I get this error: TypeError

问题 I am trying to learn how to test events emitted through a global Event Bus. Here's the code with some comments in the places I don't know what to do. // EvtBus.js import Vue from 'vue'; export const EvtBus = new Vue(); <!-- CouponCode.vue --> <template> <div> <input class="coupon-code" type="text" v-model="code" @input="validate"> <p v-if="valid"> Coupon Redeemed: {{ message }} </p> </div> </template> <script> import { EvtBus } from '../EvtBus.js'; export default { data () { return { code: ''

问题 I'm using Jest to run my tests utilizing the vue-test-utils library. Even though I've added the VueRouter to the localVue instance, it says it can't actually find the router-link component. If the code looks a little funky, it's because I'm using TypeScript, but it should read pretty close to ES6... Main thing is that the @Prop() is the same as passing in props: {..} Vue component: <template> <div> <div class="temp"> <div> <router-link :to="temp.url">{{temp.name}}</router-link> </div> </div>

问题 i'm passing the propData in my jest test file in vue but it's not set the propData data to component instead it's giving error cannot read property of clouds of undefined my object is written right?.please help. i'll provide more code if needed. my jest test file import sideWeatherDetails from "@/components/sidemenu/sideWeatherDetails.vue"; import { mount, createLocalVue } from "@vue/test-utils"; import Vuex from "vuex"; window.alert = jest.fn(); const localVue = createLocalVue(); localVue

问题 I am testing that form data are sent after submit. ContactForm.spec.js import Vue from "vue"; import Vuex from "vuex"; import { mount, shallowMount } from "@vue/test-utils"; import VeeValidate from "vee-validate"; import i18n from "@/locales"; import Vuetify from "vuetify"; import ContactForm from "@/components/Home/ContactForm.vue"; Vue.use(VeeValidate, { errorBagName: "errors" }); Vue.use(Vuetify); Vue.use(Vuex); describe("ContactForm.vue", () => { let store; let wrapper; let options; let

问题 I want to skip all of the methods that are being called within the created() hook. Is there a way to do this? So instead of this created() { this.getAllocations(); this.getModels(); this.getTeams(); this.getCustodians(); this.getDefaultFeeStructure(); } I want this created() { } It's worth noting, I cannot actually change the component itself, but for testing purposes, this needs to be done. 回答1: You can accomplish this with a global mixin (see https://vuejs.org/v2/guide/mixins.html#Global

问题 I have two directives which are supposed to add data attributes to components for testing, however, only one of the directives actually gets added. The two components are Bootstrap-Vue's BFormInput and BButton. I tried removing everything but one of the buttons and the directive is still not added i.e <b-input-group class="sm-2 mb-2 mt-2"> <b-button variant="primary" @click="searchJobs" class="rounded-0" v-jobs-search-button-directive="{ id: 'search-button' }" > Search </b-button> </b-input

问题 Suppose I have the following component: import { mapState } from 'vuex'; import externalDependency from '...'; export default { name: 'Foo', computed: { ...mapState(['bar']) }, watch: { bar () { externalDependency.doThing(this.bar); } } } When testing, I want to ensure that externalDependency.doThing() is called with bar (which comes from the vuex state) like so: it('should call externalDependency.doThing with bar', () => { const wrapper = mount(Foo); const spy = jest.spyOn(externalDependency

问题 In my component , I have a method which will execute a router.push() import router from "@/router"; // ... export default { // ... methods: { closeAlert: function() { if (this.msgTypeContactForm == "success") { router.push("/home"); } else { return; } }, // .... } } I want to test it... I wrote the following specs.. it("should ... go to home page", async () => { // given const $route = { name: "home" }, options = { ... mocks: { $route } }; wrapper = mount(ContactForm, options); const closeBtn

问题 Relatively new to Vuejs and testing its components. Using vue-test-utils and jest for testing. Getting following error test log The .vue file consists of template, component and styling. Below is the part of the SignupLayout.vue that gets error - <style lang="sass"> @import '../stylesheets/colors' html[path="/signup"], html[path="/login"] height: 100% background-image: url("../assets/background.jpg") background-size: cover background-position: center background-repeat: no-repeat overflow: