如何在单元测试中Mock @nuxtjs/i18n的useLocalePath组合式函数？

你遇到的TypeError: $setup.localePath is not a function错误，是因为mock的useLocalePath没有正确返回函数——useLocalePath本身是一个组合式函数，调用它之后才会返回处理路径的函数。以下是修正后的测试方案：

修正后的测试代码 #

import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import AppHeader from './AppHeader.vue';

// 仅需mock @nuxtjs/i18n模块，覆盖所需的组合式函数
vi.mock('@nuxtjs/i18n', () => {
  return {
    useI18n: () => ({
      locale: 'en'
    }),
    // useLocalePath是组合式函数，需返回一个路径处理函数
    useLocalePath: () => (path) => path
  };
});

describe('AppHeader', () => {
  it('should mount AppHeader and render correct link path', () => {
    const wrapper = mount(AppHeader, {
      shallow: true,
      global: {
        stubs: {
          // 修正NuxtLink stub，绑定to属性以便测试获取
          NuxtLink: {
            props: ['to'],
            template: "<div data-test='link' :to='to'><slot></slot></div>"
          }
        },
        mocks: {
          $t: (msg) => msg
        }
      }
    });

    expect(wrapper.find('div[data-test="link"]').attributes('to')).toBe('/');
  });
});

关键修改说明 #

1. 正确Mock useLocalePath
   原代码中直接将useLocalePath设为路径处理函数，但实际上useLocalePath是一个组合式函数，需要先调用它才会返回路径处理函数。修正后useLocalePath: () => (path) => path符合其调用逻辑。

2. 移除多余Mock
   无需单独mockvue-i18n或vue-i18n-routing，因为Nuxt 3的@nuxtjs/i18n模块已经封装了这些依赖，直接mock@nuxtjs/i18n即可覆盖所需的组合式函数，避免模块冲突。

3. 完善NuxtLink Stub
   原Stub没有接收to属性，导致无法通过attributes('to')获取值。新增props: ['to']并在模板中绑定:to='to'，确保测试能正确断言链接路径。

执行原命令即可验证：

npm ci
npm run test:unit

内容的提问来源于stack exchange，提问作者EstSiim