在 React 应用程序中使用 Jest 模拟服务方法

我正在使用 React 和 Typescript 和 Jest 进行单元测试。我没有使用酵素。

我正在尝试了解 Jest 的模拟功能，特别是确定某些错误。

我使用带有打字稿的 create-react-app 创建了一个反应应用程序，即

npx create-react-app my-app --template typescript

我的下一步是在 src 目录中创建以下内容。

// services/serviceResponse.ts

export interface ServiceResponse {
    label: string;
    id: string;
  }

// services/myservice.ts

import { ServiceResponse } from "./serviceResponse";

const cannedServiceResponse: ServiceResponse[] = [
    {
        label: 'label1',
        id: 'id1',
    },
    {
        
        label: 'label2',
        id: 'id2',
    },
]

async function GetServiceData(): Promise<ServiceResponse[] | Error> {
    return cannedServiceResponse;
}
  
export default {
    GetServiceData,
};
  
// components/mycomponent.tsx
import React, { useState, useEffect } from 'react';
import myservice from '../services/myservice';
import { Row } from 'react-bootstrap';
import { ServiceResponse } from '../services/serviceResponse';

export const MyComponent = () => {
    const [data, setData] = useState<ServiceResponse[] | undefined>();

    useEffect(() => {
        const fetchData = async () => {
        const serviceData = await myservice.GetServiceData();
        if (!(serviceData instanceof Error)) {
            setData(serviceData);
        }
        };

        fetchData();
    }, []);

    if (!data) {
        return <></>;
    }

    return (
        <>
            <Row xs={1} md={4} className="col-lg-12">
            </Row>
        </>
    );
};

然后我想通过模拟从服务方法返回的数据来对组件进行单元测试GetServiceData。我的测试组件代码是

// components/mycomponents.test.tsx
import React from 'react';
import TestRenderer from 'react-test-renderer';
import { MyComponent } from './mycomponent';
import myservice from '../services/myservice';
import { Row } from 'react-bootstrap';
import { ServiceResponse } from '../services/serviceResponse';

const mockData: ServiceResponse[] = [
  { label: 'a', id: 'b'},
  { label: 'f', id: 'g'},
];

describe('mycomponent', () => {
  
  it('MyComponent returns data', () => {
    jest.spyOn(myservice, 'GetServiceData').mockImplementation(
      () =>
        new Promise<ServiceResponse[]>((resolve) => {
          resolve(mockData);
        })
    );

    const component = TestRenderer.create(<MyComponent />);
    const componentInstance = component.root;
    console.log(component.toJSON());
    // TODO - Add an expect line here for assertion
  });
});

问题是 jest.spyOn() 不会模拟数据。我也尝试使用以下方法

jest.mock('../services/myservice', () => ({
  GetServiceData: jest.fn().mockReturnValue(() => Promise.resolve(mockData)),
}));

我知道有一些方法可以使用此处使用的酶进行测试，但我正在尝试了解使用 Jest 进行的模拟以及我做错了什么。