test-utils: Bug: Mocking not working when setup() is defined

Describe the bug I’m trying to mock the vuei18n $t. But this is not working when using the setup composition api. When disabling the setup, it works as expected. I also tried with other function names like $test. Strange thing is, when using a name without the dollar sign, it also works just normal.

To Reproduce

index.vue

<template>
    <div> {{ $t('hello') }}</div>
</template>
<script>
  export default {
    setup(){
        return {} // will not work
    },
  }
</script>

test file

import { config, mount } from '@vue/test-utils'
import Index from './index'

config.global = {
    mocks: {
        $t: (msg) => msg
    }
}

describe ('Index Tests', () => {
     it ('should mount without crashing', () => {
         const wrapper = mount(Index)
         expect(wrapper).toBeTruthy();
     })
});

Expected behavior Should also works when using the composition api.

Related information:

@vue/test-utils version: 2.2.3
Vue version: 3.2.45
node version: v18.2.0
npm (or yarn) version: 8.10.0

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 17 (10 by maintainers)

Commits related to this issue

fix: allow to mock global function in script setup components Fixes #1869 — committed to cexbrayat/vue-test-utils-next by cexbrayat 2 years ago
fix: allow to mock global function in script setup components Fixes #1869 — committed to cexbrayat/vue-test-utils-next by cexbrayat 2 years ago
fix: allow to mock global function in script setup components (#1871) Fixes #1869 — committed to vuejs/test-utils by cexbrayat 2 years ago

Most upvoted comments

I may have found a way to make this use-case work with Vue v3.2.45 Once #1871 is merged and released, you should be able to upgrade to the latest version of Vue and VTU

cexbrayat on Nov 16, 2022

we still have the same error. downgrading to 2.2.2 fixes it immediately… using a combination of options api and composition api in our project. and since 2.2.3 we get this problem: global mocks just disappear (in our case, we ‘enhanced’ the mount/shallowMount with mocks for all vue-i18n methods, so all our mount/shallowMount have this mocked vue-i18n methods, even adding a mocked $router just … disappears…) But we’re using vue 3.2.45 in both cases! If i try vue3.2.41 and vtu 2.2.4 i get the errors too.

stefanlivens on Nov 22, 2022

@JeremCafeyn Happy to hear that 👍

For global mocks, can you provide us a small repro online using https://stackblitz.com/edit/vitest-dev-vitest-qoiwy3?file=package.json&initialPath=__vitest__ ? I’ll take a look to check if this is a VTU issue.

cexbrayat on Nov 21, 2022

Oh that interesting, because we are still using Vue v3.2.41 and this issue appeared after updating test-utils to v2.2.3. I just did a downgrade to v2.2.1 and the error is now gone.

simonvizzini on Nov 16, 2022

Facing the exact same issue with test-utils 2.2.3

I think bug was introduced in one of the recent patch version, will try to downgrade to 2.2.2 or 2.2.1 in the meantime

simonvizzini on Nov 16, 2022