CODEWITHSUNDEEP
vue.jsjestjsvue-test-utils
obliviousfella
obliviousfella

Reputation: 445

how to mock callback with jest

I have a confirm modal component which returns true/false with the callback but I can't make it work. Tried various things like jest.fn().mockReturnValue(true). Any hint/suggestion in order to test a component that returns a callback through an event bus?

components/confirmModal.vue

<template lang="pug">
transition(name='fade')
  #swConfirm.confirm-modal-overlay(v-if='isShow', @click='handleClickOverlay')
    transition(name='zoom')
      .confirm-modal-container(v-if='isShow')
        span.confirm-modal-text-grid(@click.stop='')
          h5.confirm-modal-title(v-if='dialog.title') {{ dialog.title }}
          p.confirm-modal-text(v-if='dialog.message') {{ dialog.message }}
        .confirm-modal-btn-grid(:class='{ isMono: dialog.isMono }')
          button.confirm-modal-btn.left(v-if='!dialog.isMono', @click.stop='e => handleClickButton(false)')
            | {{ dialog.button.no || "Cancel"  }}
          button.confirm-modal-btn(@click.stop='e => handleClickButton(true)')
            | {{ dialog.button.yes || "OK"  }}
</template>

<script>
import Vue from 'vue'
import { events } from '../plugins/confirm-modal'

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

const Component = {
  name: 'confirmModal',
  data() {
    return {
      isShow: false,
      dialog: {
        title: '',
        message: '',
        button: {},
        isMono: false
      },
      params: {}
    }
  },
  methods: {
    resetState() {
      this.dialog = {
        title: '',
        message: '',
        button: {},
        isMono: false,
        callback: () => {}
      }
    },
    handleClickButton(confirm) {
      this.isShow = false
      if (this.params.callback) {
        this.params.callback(confirm)
      }
    },
    handleClickOverlay() {
      this.isShow = false
    },
    open(params) {
      this.resetState()
      this.params = params
      this.isShow = true
      Object.entries(params).forEach(param => {
        if (typeof param[1] == typeof this.dialog[param[0]]) {
          this.dialog[param[0]] = param[1]
        }
      })
    }
  },
  mounted() {
    events.$on('open', this.open)
  }
}
export default Component
</script>

plugins/confirm-modal.js (I need this to make the component accessible throughout the application)

import confirmModal from "~/components/confirmModal.vue"
import Vue from "vue"

export const events = new Vue({
  name: 'confirm-modal'
})

export default (ctx, inject) => {
  Vue.component('confirm-modal', confirmModal)

  const confirm = params => {
    events.$emit('open', params)
  }
  confirm.close = () => {
    events.$emit('close')
  }
  ctx.$confirm = confirm
  inject("confirm", confirm)
}

the way I call it on my component is like this

reset() {
      this.$confirm({
        message: "Reset the form ?",
        callback: async (confirm) => {
          if (confirm) {
            localStorage.removeItem("formWorks")
          }
        }
      })
    },

and I am trying to test it like the following but no luck

beforeEach(async () => {
  wrapper = shallowMount(New, { 
    mocks: {
      $confirm: jest.fn().mockReturnValue(true)
    } 
  })
})

it("resets formWorks)", async () => {
  wrapper.vm.reset()
})

Upvotes: 0

Views: 1067

Answers (1)

Andrew Dibble
Andrew Dibble

Reputation: 901

You'll want to use mockImplementation:

beforeEach(async () => {
  wrapper = shallowMount(New, { 
    mocks: {
      $confirm: jest.fn().mockImplementation(({ callback }) => callback(true))
    } 
  })
})

I anticipate you'll run into some issues with the callback being asynchronous so that's something to be aware of.

Upvotes: 1

Related Questions