When I try to test my CardList component I have the next error: TypeError: (0 , _CardApiService.getAllCards)(...).then is not a function

Question

When I change the fakeData array (in the APIservice file) to use JSON server, I can't test it. The aplication render well in the browser, but I don't know how to test the async function to get the data. The console logs while I'm trying to solve it shown first empty array, and then array with the db.json data. I gues this is one of the things I must check, but don't know how. Sorry but I'm just starting in react and testing. Colud anyone help me please?

Kind regards.

Here is the test of my component CardList:

    import { render, screen } from "@testing-library/react";
    import { getAllCards } from "../../services/CardApiService";
    import { CardList } from "./cardList";
    
    jest.mock( "../../services/CardApiService" );
    test( "renders CardList with all items", async () =>
    {
        getAllCards.mockImplementation( () => [ { cardName: "fakeTestList1" }, { cardName: "fakeTestList2" } ] );
        const component = render( <CardList /> );
        const Card1 = screen.findByText( /fakeTestList1/s );
        const Card2 = screen.findByText( /fakeTestList2/s );
    
        component.debug();
    
    
        expect( Card1 ).toBeInTheDocument();
        expect( Card2 ).toBeInTheDocument();
    } );

The result of the test that shows the terminal is this:

    renders CardList with all items
    
        TypeError: (0 , _CardApiService.getAllCards)(...).then is not a function
    
           7 |
           8 |   useEffect(() => {
        >  9 |       getAllCards().then( ( res ) => setCards( res.data ) );
             |                     ^
          10 |       /* 
          11 |        */;
          12 |   }, []);
    
          at src/components/CardList/CardList.jsx:9:21
          at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
          at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
          at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
          at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
          at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
          at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
          at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
          at render (node_modules/@testing-library/react/dist/pure.js:97:26)
          at Object.<anonymous> (src/components/CardList/CardList.test.js:9:23)

Here is my component CardList:

    import { useState, useEffect } from "react";
    import { getAllCards } from "../../services/CardApiService";
    import { Card } from "../Card/Card";
    
    export const CardList = () => {
      const [cards, setCards] = useState([]);
    
      useEffect(() => {
          getAllCards().then( ( res ) => setCards( res.data ) );
          /* console.log( cards ) */;
      }, []);
    
      return (
          <ul>
              {/* {console.log(cards)} */}
          {cards.map((card, index) => (
            <Card key={index} card={card} />
          ))}
        </ul>
      );
    };

Here is my APIservice:

    import axios from "axios";
    
    const fakeDataCards = [ { cardName: "fake1" }, { cardName: "fake2" } ];
    
    let url = "http://localhost:5001/items"
    
    export async function getAllCards ()
    {
        const res = await axios.get( url );
        console.log( res.data );
        return res;
    }