Error in mounted hook: "TypeError: this.$refs.modal.open is not a function"

Question

I have this component:

    export default class ModalDetails extends Vue {
  mounted(): void {
    (this.$refs.modal as any).open();
  }
}

which I am trying to test:

describe('ModalDetails', () => {
  let wrapper: Wrapper<Vue>;
  let store: Store<any>;

  beforeEach(() => {
    wrapper = mount(ModalDetails, {
      localVue,
      store,
    });
}

but I am getting this error thrown: [Vue warn]: Error in mounted hook: "TypeError: this.$refs.modal.open is not a function"

can someone help?

H.A. · Accepted Answer · 2022-11-18 13:43:33Z

0

The solution to this is to mock the function in the test:

      const mixinComponent = Vue.extend({
      mixins: [ModalDetails],
      methods: {
        mounted: () => {
          /* empty function */
        },
      },
});

then in the component itself:

export default class ModalDetails extends Vue {
  mounted(): void {
    this.open();
  }
  open() {
   (this.$refs.modal as any).open();
}

answered Nov 18, 2022 at 13:43

H.A.

1611 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error in mounted hook: "TypeError: this.$refs.modal.open is not a function"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related