如何在vuejs中编写一个带有数据获取功能的单元测试，基于响应器来修改数据？

// 引入需要测试的组件
import MyComponent from '@/components/MyComponent.vue';
// 引入Vue Test Utils和Jest
import { shallowMount } from '@vue/test-utils';
import axios from 'axios';

// 使用Jest的mock功能来模拟axios的请求
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mocked data' })),
}));

describe('MyComponent', () => {
  it('fetches data and updates the component', async () => {
    // 创建一个响应器（mock）来修改数据
    const mockData = 'mocked data';
    const mockGet = jest.spyOn(axios, 'get').mockResolvedValueOnce({ data: mockData });

    // 测试组件中的数据获取功能
    const wrapper = shallowMount(MyComponent);
    await wrapper.vm.fetchData();

    // 断言数据是否正确获取和更新
    expect(mockGet).toHaveBeenCalled();
    expect(wrapper.vm.data).toBe(mockData);
  });
});