I am creating some Jest tests for my LWC components and i am struggeling to work out how to test / mock the apex call outs, in this basic component i have one but when i add a mock for the apex it causes all tests to fail.

Could somone point me in the right direction here?

LWC js

import { LightningElement, api, track } from 'lwc';
import syncData from '@salesforce/apex/DataController.syncData';
import Data_Sync_Fail from '@salesforce/label/c.Data_Sync_Fail';
import Data_Sync_Default_Message from '@salesforce/label/c.Data_Sync_Default_Message';
import Data_Sync_Heading from '@salesforce/label/c.Data_Sync_Heading';



export default class syncDataLwc extends LightningElement {
    @api recordId;
    
    @track syncMessage = Data_Sync_Default_Message;
    @track syncDone = false;

    // Expose the labels to use in the template.
    label = {
        Data_Sync_Heading
    };

    connectedCallback() {
        syncData({rec: this.recordId})
         .then (response => {
             this.syncMessage = response;
             this.syncDone = true;
         })
         .catch(() => {
             this.syncMessage = Data_Sync_Fail;
             this.syncDone = true;
         });
    }

<template>
    <div>
        <p><b>{label.Data_Sync_Heading}</b></p>
        <p>{syncMessage}</p>
    </div>
</template>

import { createElement } from 'lwc';
import syncDataLwc from 'c/syncDataLwc';
import Data_Sync_Fail from '@salesforce/label/c.Data_Sync_Fail';
import Data_Sync_Heading from '@salesforce/label/c.Data_Sync_Heading';
import syncData from '@salesforce/apex/DataController.syncData';

let element;

//mock out the text for the heading label
jest.mock("@salesforce/label/c.Data_Sync_Heading", () => {
    return { default: "Sync Data" };
}, { virtual: true });

//mock out the text for the default failure message label
jest.mock("@salesforce/label/c.Data_Sync_Fail", () => {
    return { default: "Failed to Synchronise Data. Data could be out of date." };
}, { virtual: true });



// ----- adding the apex mock causes all tests to fail, when not mocked tests work as exspected.

// Mocking syncData Apex method call
jest.mock('@salesforce/apex/DataController.syncData', () => {
     return {default: jest.fn()};
}, { virtual: true });

//This line of code is necessary to reset the DOM after each block of test code
afterEach(() => {
    while (document.body.firstChild) {
        jest.clearAllMocks();
        document.body.removeChild(document.body.firstChild);
    }
});

beforeEach(() => {
    // Create initial element
    element = createElement('c-syncDataLwc', {
        is: syncDataLwc
    });
    document.body.appendChild(element);
});




describe('c-sync-Data-lwc', () => {
    
    //An it block describes a single test. A test represents a single functional unit that you want to test. Write the it to describe the expected behavior of that function.
    it('CUSTOM LABEL TEST: Custom label for the heading was mocked with the default value', () => {
        //The test uses the imported createElement method to create an instance of the component to test,
                
        return Promise.resolve().then(() => {
            const paragraphs = element.shadowRoot.querySelectorAll('p');
            expect(paragraphs.length).toBe(2);

            const boldHeading = element.shadowRoot.querySelectorAll('b');
            expect(boldHeading.length).toBe(1);


            expect(boldHeading[0].textContent).toBe("Sync Data");

        });


    });


    it('LWC DISPLAY TEST: checking number of div, p, and b tags elements used', () => {
               
        return Promise.resolve().then(() => {
            const div = element.shadowRoot.querySelectorAll('div');
            expect(div.length).toBe(1);

            const paragraphs = element.shadowRoot.querySelectorAll('p');
            expect(paragraphs.length).toBe(2);

            const boldHeading = element.shadowRoot.querySelectorAll('b');
            expect(boldHeading.length).toBe(1);


        });


    });


    it('APEX RETURN FAIL: checking that the default error is used when apex call fails', () => {
               
        return Promise.resolve().then(() => {

		// Apex test will happen here but when i add a mock for the apex it causes all tests to fail


        });


    });



});