How to mock provided function without using injection in Cypress tests in Vue3

Question

Though I have a working solution using the global object I'd love to avoid injection. Is there a way to use mocking to achieve this?

This is only about the mocking so the code is stripped down to only show this step.

//myComponent.vue
<template>
  <div>{{$t('some.label')}}</div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  inject: ['$t'],
  setup(){},
})
</script>

This one works.

//test
import myComponent from '../myComponent'
import { createI18n } from 'vue-i18n'
const i18n = createI18n({locale: 'en'})
const t = i18n.global.tm
const globalProvide = {
    global: {
        provide: {
            $t: t
        }
    }
}
mount(myComponent, globalProvide)

This one doesen't. this.$t is not a function.

//test
import myComponent from '../myComponent'

mount(myComponent, {
  mocks: {
    $t: (msg) => { msg }
  }
})

tony19 · Accepted Answer · 2022-03-12 04:24:29Z

2

It looks like you might've been trying the v1 syntax of Test Utils for mocks, but that has moved in v2.

To mock $t, use the global.mocks mounting option:

mount(myComponent, {
  global: {
    mocks: {
      $t: (msg) => { msg }
    }
  }
})

answered Mar 12, 2022 at 4:24

tony19

140k24 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

How to mock provided function without using injection in Cypress tests in Vue3

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