react-apollo mock provider return no data

i have a component which uses react-apollo graphql function to query data. i am trying to retrieve mock apollo provider using mocked provider from react-apollo/test-utils. mocked data is not coming in the mocked response.

this is my component.

import React from 'react';
import PropTypes from 'prop-types';
import autoBind from 'react-autobind';
import { Meteor } from 'meteor/meteor';
import { graphql, compose } from 'react-apollo';
import isEqual from 'lodash.isequal';
import moment from 'moment';
import { bookingsSearch } from '../../queries/Bookings.gql';
import ActiveJobListDetail from './ActiveJobListDetail';
import ActiveJob from './ActiveJob';
import TasksDataWrapper from './TasksDataWrapper';
import Styles from './styles';
import BlankState from '../BlankState/index';

class ActiveJobsList extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      taskOwner: null,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    const { data, userId, dateFrom, dateTo, status } = this.props;
    const {
      data: nextData,
      userId: nextUserId,
      dateFrom: nextDateFrom,
      dateTo: nextDateTo,
      status: nextStatus,
    } = nextProps;
    const { taskOwner } = this.state;
    const { taskOwner: nextTaskOwner } = nextState;
    return (
      dateFrom !== nextDateFrom ||
      dateTo !== nextDateTo ||
      userId !== nextUserId ||
      taskOwner !== nextTaskOwner ||
      status !== nextStatus ||
      !isEqual(data.bookingsSearch, nextData.bookingsSearch)
    );
  }
  sortBookingsByDate(bookings) {
    return bookings.sort((a, b) => moment(a.date) - moment(b.date));
  }
  renderActiveJobs() {
    const { data } = this.props;
    if (data.loading) return null;
    const {
      data: {
        bookingsSearch: { bookings },
      },
    } = this.props;
    const sortedBookings = this.sortBookingsByDate(bookings);

    return sortedBookings && sortedBookings.length > 0 ? (
      <>
        <p data-testid="bookings-desc">
          Click on an active task to see the live tracking or click on the completed task to see the
          POD.
        </p>

        {sortedBookings.map((booking) => {
          return (
            <TasksDataWrapper
              key={booking._id}
              booking={booking}
              render={({ tasks, loading }) => {
                return (
                  <div key={booking._id} className="activejobs-wrapper">
                    {/* booking detail */}
                    <ActiveJob booking={booking} firstTask={tasks && tasks[0]} />

                    {/* tasks against booking */}
                    <ActiveJobListDetail tasks={tasks} loading={loading} />
                  </div>
                );
              }}
            />
          );
        })}
      </>
    ) : (
      <BlankState
        icon={{ style: 'solid', symbol: 'calendar-alt' }}
        title="No Data Found"
        subtitle=""
      />
    );
  }
  render() {
    return <Styles.ActiveJobsList>{this.renderActiveJobs()}</Styles.ActiveJobsList>;
  }
}
ActiveJobsList.defaultProps = {
  dateFrom: null,
  dateTo: null,
  userId: null,
};

ActiveJobsList.propTypes = {
  data: PropTypes.object.isRequired,
  userId: PropTypes.string,
  dateFrom: PropTypes.string,
  dateTo: PropTypes.string,
  status: PropTypes.array.isRequired,
};

export default compose(
  graphql(bookingsSearch, {
    options: ({ userId, dateFrom, dateTo, status }) => ({
      variables: {
        userId,
        dateFrom,
        dateTo,
        status,
      },
      pollInterval: Meteor.settings.public.graphQL.pollInterval * 10,
    }),
  }),
)(ActiveJobsList);

my test goes likeā€¦

import React from 'react';
import { render } from '@testing-library/react';
import { MockedProvider } from 'react-apollo/test-utils';
import { bookingsSearch } from '../../../queries/Bookings.gql';
import ActiveJobsList from '..';
import 'regenerator-runtime/runtime';

const mocks = {
  request: {
    query: bookingsSearch,
    variables: {
      dateFrom: null,
      dateTo: null,
      perPage: 10,
      search: '',
      status: null,
      userId: null,
    },
  },
  result: {
    data: {
      bookingsSearch: {
        total: 66239,
        dateFrom: null,
        dateTo: null,
        bookings: [
         //..BOOKINGS ARRAY
        ],
      },
    },
  },
};

const waitForData = () => new Promise((res) => setTimeout(res, 0));

it('renders without error', async () => {
  const { getByTestId, debug } = render(
    <MockedProvider mocks={[mocks]}>
      <ActiveJobsList status={[]} />
    </MockedProvider>,
  );
 
  await waitForData();


  const el = getByTestId('bookings-desc');
  
  expect(el.textContent).toContain(
  'Click on an active task to see the live tracking or click on the completed task to see the POD.',
  );
});

PACAKGE.JSON

"dependencies": {
    "@analytics/google-analytics": "^0.4.0",
    "@babel/runtime": "^7.10.5",
    "@cleverbeagle/seeder": "^2.0.3",
    "@google/maps": "^1.1.3",
    "acorn": "^7.3.1",
    "analytics": "^0.5.3",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-batch-http": "^1.2.14",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "apollo-link-persisted-queries": "^0.2.2",
    "apollo-link-retry": "^2.2.16",
    "apollo-link-timeout": "^1.4.1",
    "apollo-link-ws": "^1.0.20",
    "apollo-server-express": "^2.15.1",
    "apollo-utilities": "^1.3.4",
    "b64-to-blob": "^1.2.19",
    "babel-plugin-lodash": "^3.3.4",
    "bcrypt": "^5.0.0",
    "clipboard-copy": "^3.1.0",
    "commonmark": "^0.29.1",
    "cordova-ios": "^5.1.1",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "country-data": "0.0.31",
    "dd-trace": "^0.28.1",
    "eslint-plugin-react-hooks": "^1.7.0",
    "file-saver": "^2.0.2",
    "google-map-react": "^1.1.7",
    "google-polyline": "^1.0.3",
    "googleapis": "^39.2.0",
    "graphql": "^14.7.0",
    "graphql-subscriptions": "^1.1.0",
    "graphql-tag": "^2.10.4",
    "handlebars": "^4.7.6",
    "isomorphic-fetch": "^2.2.1",
    "jest-transform-graphql": "^2.1.0",
    "jquery": "^3.5.1",
    "jquery-validation": "^1.19.2",
    "jszip": "^3.5.0",
    "juice": "^5.2.0",
    "lodash": "^4.17.19",
    "lodash.chunk": "^4.2.0",
    "lodash.clone": "^4.5.0",
    "lodash.difference": "^4.5.0",
    "lodash.invert": "^4.3.0",
    "lodash.remove": "^4.7.0",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.27.0",
    "moment-duration-format": "^2.3.2",
    "moment-timezone": "^0.5.31",
    "node-fetch": "^2.6.0",
    "node-gyp": "^6.0.1",
    "node-pre-gyp": "^0.14.0",
    "onesignal-node": "^3.0.2",
    "polished": "^3.6.5",
    "prop-types": "^15.7.2",
    "puppeteer": "^5.4.1",
    "rc-slider": "^8.7.1",
    "react": "^16.13.1",
    "react-apollo": "^2.5.8",
    "react-autobind": "^1.0.6",
    "react-bootstrap": "^0.32.4",
    "react-burger-menu": "^2.7.0",
    "react-content-loader": "^4.3.4",
    "react-csv-reader": "^1.3.1",
    "react-day-picker": "^7.4.8",
    "react-device-detect": "^1.13.1",
    "react-dom": "^16.13.1",
    "react-event-timeline": "^1.6.3",
    "react-geocode": "^0.1.2",
    "react-helmet": "^5.2.1",
    "react-iframe": "^1.8.0",
    "react-intl-tel-input": "^7.1.1",
    "react-markdown": "^4.3.1",
    "react-places-autocomplete": "^7.3.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scroll": "^1.8.0",
    "react-select": "^2.4.4",
    "react-sortablejs": "^2.0.11",
    "react-stripe-elements": "^2.0.3",
    "react-switch": "^5.0.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "remove": "^0.1.5",
    "request": "^2.88.2",
    "routific": "0.0.3",
    "sanitize-html": "^1.27.0",
    "simpl-schema": "^1.8.0",
    "sprintf-js": "^1.1.2",
    "stripe": "^7.15.0",
    "styled-components": "^4.4.1",
    "subscriptions-transport-ws": "^0.9.17",
    "twilio": "^3.48.0",
    "validator": "^11.1.0",
    "xero-node": "^4.16.1",
    "xml": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@testing-library/react": "^12.1.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.9.0",
    "enzyme": "^3.11.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jest": "^22.21.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-meteor": "^6.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-testcafe": "^0.2.1",
    "husky": "^3.1.0",
    "jest": "^24.9.0",
    "jest-cli": "^24.9.0",
    "lint-staged": "^9.5.0",
    "prettier": "1.14.0",
    "testcafe": "^1.8.8"
  },

after running test it gives me loading state but not the given mock data. is there anything that i am doing wrong here. any help is appreciated. sad that i couldnt find any documentation for testing graphql and compose hoc components.