测试Vue组件computed内的useHead时出现Cannot read properties错误

错误原因 #

你遇到的Cannot read properties of undefined (reading 'name')报错，本质是两个问题导致：

1. 空mock的useHead无法处理组件传入的computed响应式对象，unhead内部逻辑尝试访问参数的name属性时触发报错
2. 测试断言直接用普通对象对比，但组件传给useHead的是computed返回的ref，两者不匹配

解决步骤 #

1. 正确Mock useHead #

不要用空mock，给useHead一个能处理响应式参数的模拟实现，避免内部访问未定义属性：

import { useHead } from '@unhead/vue';

jest.mock('@unhead/vue', () => ({
  // 模拟useHead的基础行为，接收参数并返回，避免内部报错
  useHead: jest.fn((config) => config),
}));

2. 调整断言逻辑 #

组件中传给useHead的是computed ref，断言时需要提取其value属性进行对比：

const expectedTitle = 'Test Title';

describe('Page Meta Tests', () => {
  it('should display meta title', async () => {
    // 确保组件的data有正确的title值（根据组件实际情况传props/mock状态）
    const wrapper = await mountComponent({
      props: { data: { title: expectedTitle } }
    });

    // 获取useHead的调用参数，取出computed的value
    const [headConfig] = useHead.mock.calls[0];
    expect(headConfig.value).toEqual({ title: expectedTitle });
  });
});

3. 确保组件数据初始化 #

根据组件中data的来源（props/内部状态/状态管理），在测试时给它赋值：

• 如果是props传入：mount时通过props参数传递{ data: { title: 'Test Title' } }
• 如果是内部data：可以通过wrapper.vm.data = { title: 'Test Title' }直接赋值
• 如果是状态管理（如Pinia）：提前mock对应的store状态

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