如何用jest-fetch-mock测试API数据获取的Vue组件？数据未正常渲染

可能原因及对应解决方法 #

1. 模拟响应数据格式不匹配 #

组件通常会通过res.json()解析响应，若直接传入对象而非JSON字符串，会导致解析失败。需将模拟数据转为JSON字符串：

// 错误写法
fetchMock.mockResponseOnce(mockData);
// 正确写法
fetchMock.mockResponseOnce(JSON.stringify(mockData));

同时检查组件预期的数据结构：若组件期望response.data.list这类嵌套格式，需确保模拟数据的结构与之完全对应。

2. 未等待异步请求完成更新DOM #

组件在mounted中发起的异步请求不会同步更新DOM，需等待Promise完成并触发Vue的更新机制：

• 使用flushPromises（需从@vue/test-utils导入）等待异步操作完成
• 或调用await wrapper.vm.$nextTick()

示例测试代码：

import { mount, flushPromises } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';
import fetchMock from 'jest-fetch-mock';

fetchMock.enableMocks();

describe('MyComponent', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  it('渲染API返回的数据列表', async () => {
    const mockData = [{ id: 1, name: '测试项1' }, { id: 2, name: '测试项2' }];
    fetchMock.mockResponseOnce(JSON.stringify(mockData));

    const wrapper = mount(MyComponent);
    await flushPromises(); // 等待请求完成及DOM更新

    expect(wrapper.find('ul').children().length).toBe(2);
    expect(wrapper.text()).toContain('测试项1');
  });
});

3. Fetch请求URL不匹配 #

若组件中请求的URL与测试场景预期不符，会导致mock未被触发。可打印请求日志排查：

console.log(fetchMock.mock.calls); // 查看实际发起的请求URL及参数

若需匹配特定URL，可使用fetchMock.mockOnce指定：

fetchMock.mockOnce('/api/target-url', JSON.stringify(mockData));

4. 响应式数据赋值错误 #

检查组件是否正确将请求结果赋值给响应式变量：

• 组合式API中，需赋值给ref/reactive对象的对应属性（如items.value = data）
• 选项式API中，需赋值给this.xxx而非局部变量

示例组件代码（组合式API）：

<script setup>
import { ref, onMounted } from 'vue';
const items = ref([]);

onMounted(async () => {
  const res = await fetch('/api/data');
  const data = await res.json();
  items.value = data; // 正确赋值给响应式变量
});
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

5. Ionic组件的测试环境配置 #

使用Ionic Framework时，需确保测试环境正确注册所需的Ionic组件，避免因组件未注册导致渲染异常：

import { IonList, IonItem } from '@ionic/vue';

const wrapper = mount(MyComponent, {
  global: {
    components: {
      IonList,
      IonItem
    }
  }
});

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