I am using the new Relay Hooks and finding it difficult to get the tests passing. I am experiencing the issue mentioned in their [docs](https://relay.dev/docs/guides/testing-relay-with-preloaded-queries/).

> 
> If you add the console.log before and after usePreloadedQuery, only the "before" call is hit
> 
> 
> 

```js
//sample test

jest.useFakeTimers()

test("a list of entries is displayed when the component mounts", async () => {
  const environment = createMockEnvironment()

  environment.mock.queueOperationResolver(operation => {
    return MockPayloadGenerator.generate(operation, {
      Entry() {
        return {
          id: "123",
          title: "hello",
          urlKey: "abc"
        }
      }
    })
  })

  relay.mock.queuePendingOperation(EntryListQuery, {})

  render(<RelayEnvironmentProvider environment={environment}>
           <Entries />
         </RelayEnvironmentProvider>
  )

  jest.runAllImmediates()

  expect(await screen.getByText(/hello/i)).toBeInTheDocument()
})

```

```js
//core component I am wanting to test
import { Suspense, useEffect } from "react"
import { useQueryLoader } from "react-relay/hooks"
import { Loading } from "./Loading"
import { EntryList, EntryListQuery } from "./EntryList"

const Entries = () => {
  const [queryReference, loadQuery, disposeQuery] = useQueryLoader(EntryListQuery)

  useEffect(() => {
    if (!queryReference) loadQuery()
  }, [disposeQuery, loadQuery, queryReference])

  if (!queryReference) return <Loading />

  return (
    <Suspense fallback={<Loading />}>
      <EntryList queryReference={queryReference} />
    </Suspense>
  )
}

export { Entries }

```

```js
//the core component's child component
import { usePreloadedQuery } from "react-relay/hooks"
import graphql from "babel-plugin-relay/macro"
import { Link } from "react-router-dom"
import { Entry } from "./Entry"

const EntryListQuery = graphql`
  query EntryListQuery {
    queryEntry {
      id
      title
      urlKey
    }
  }
`

const EntryList = ({ queryReference }) => {
  const { queryEntry } = usePreloadedQuery(EntryListQuery, queryReference)

  return (
    <section>
      <div className="flex justify-between items-center">
        <p>search</p>
        <Link to="?action=new">New Entry</Link>
      </div>
      <ul>
        {queryEntry.map(entry => {
          if (entry) return <Entry key={entry.id} entry={entry} />
          return null
        })}
      </ul>
    </section>
  )
}
export { EntryList, EntryListQuery }

```

I am finding that the `loadQuery` is getting called, however anything I `console.log` in `queueOperationResolver` doesn't appear. And If I add a `console.log` before `usePreloadedQuery` it outputs, however after it doesn't. So it appears the `EntryList` is being suspended and the query is never resolving.

I have found that if I change the test to the below is also doesn't trigger any errors, it looks like `queueOperationResolver` never gets called.

```js
environment.mock.queueOperationResolver(() => new Error("Uh-oh"))

```

When I `console.log` the `queryReference` in the `EntryList` before the `usePreloadedQuery` code it outputs an object such as the below. So I know that the query is being passed down correctly.

```js
{
      kind: 'PreloadedQuery',
      environment: RelayModernEnvironment {
        configName: 'RelayModernMockEnvironment',
        _treatMissingFieldsAsNull: false,
        __log: [Function: emptyFunction],
        requiredFieldLogger: [Function: defaultRequiredFieldLogger],
        _defaultRenderPolicy: 'partial',
        _operationLoader: undefined,
        _operationExecutions: Map(1) { '643ead0ae575426fdd62800c27d6fef3{}' => 'active' },
        _network: { execute: [Function: execute] },
        _getDataID: [Function: defaultGetDataID],
        _publishQueue: RelayPublishQueue {
          _hasStoreSnapshot: false,
          _handlerProvider: [Function: RelayDefaultHandlerProvider],
          _pendingBackupRebase: false,
          _pendingData: Set(0) {},
          _pendingOptimisticUpdates: Set(0) {},
          _store: [RelayModernStore],
          _appliedOptimisticUpdates: Set(0) {},
          _gcHold: null,
          _getDataID: [Function: defaultGetDataID]
        },
        _scheduler: null,
        _store: RelayModernStore {
          _gcStep: [Function (anonymous)],
          _currentWriteEpoch: 0,
          _gcHoldCounter: 0,
          _gcReleaseBufferSize: 10,
          _gcRun: null,
          _gcScheduler: [Function: resolveImmediate],
          _getDataID: [Function: defaultGetDataID],
          _globalInvalidationEpoch: null,
          _invalidationSubscriptions: Set(0) {},
          _invalidatedRecordIDs: Set(0) {},
          __log: null,
          _queryCacheExpirationTime: undefined,
          _operationLoader: null,
          _optimisticSource: null,
          _recordSource: [RelayMapRecordSourceMapImpl],
          _releaseBuffer: [],
          _roots: [Map],
          _shouldScheduleGC: false,
          _storeSubscriptions: [RelayStoreSubscriptions],
          _updatedRecordIDs: Set(0) {},
          _shouldProcessClientComponents: undefined,
          getSource: [Function],
          lookup: [Function],
          notify: [Function],
          publish: [Function],
          retain: [Function],
          subscribe: [Function]
        },
        options: undefined,
        _isServer: false,
        __setNet: [Function (anonymous)],
        DEBUG_inspect: [Function (anonymous)],
        _missingFieldHandlers: undefined,
        _operationTracker: RelayOperationTracker {
          _ownersToPendingOperationsIdentifier: Map(0) {},
          _pendingOperationsToOwnersIdentifier: Map(0) {},
          _ownersIdentifierToPromise: Map(0) {}
        },
        _reactFlightPayloadDeserializer: undefined,
        _reactFlightServerErrorHandler: undefined,
        _shouldProcessClientComponents: undefined,
        execute: [Function: mockConstructor] {
          _isMockFunction: true,
          getMockImplementation: [Function (anonymous)],
          mock: [Getter/Setter],
          mockClear: [Function (anonymous)],
          mockReset: [Function (anonymous)],
          mockRestore: [Function (anonymous)],
          mockReturnValueOnce: [Function (anonymous)],
          mockResolvedValueOnce: [Function (anonymous)],
          mockRejectedValueOnce: [Function (anonymous)],
          mockReturnValue: [Function (anonymous)],
          mockResolvedValue: [Function (anonymous)],
          mockRejectedValue: [Function (anonymous)],
          mockImplementationOnce: [Function (anonymous)],
          mockImplementation: [Function (anonymous)],
          mockReturnThis: [Function (anonymous)],
          mockName: [Function (anonymous)],
          getMockName: [Function (anonymous)]
        },
        executeWithSource: [Function: mockConstructor] {
          _isMockFunction: true,
          getMockImplementation: [Function (anonymous)],
          mock: [Getter/Setter],
          mockClear: [Function (anonymous)],
          mockReset: [Function (anonymous)],
          mockRestore: [Function (anonymous)],
          mockReturnValueOnce: [Function (anonymous)],
          mockResolvedValueOnce: [Function (anonymous)],
          mockRejectedValueOnce: [Function (anonymous)],
          mockReturnValue: [Function (anonymous)],
          mockResolvedValue: [Function (anonymous)],
          mockRejectedValue: [Function (anonymous)],
          mockImplementationOnce: [Function (anonymous)],
          mockImplementation: [Function (anonymous)],
          mockReturnThis: [Function (anonymous)],
          mockName: [Function (anonymous)],
          getMockName: [Function (anonymous)]
        },
        ...

```

---

**Update**

I have found that the following tests works, so this means that there is something I am doing wrong when trying to mock the query in the component that uses `useQueryLoader`.

```js
//sample test
test("a list of entries is displayed when the component mounts", async () => {
  const environment = createMockEnvironment()

  environment.mock.queueOperationResolver(operation => {
    return MockPayloadGenerator.generate(operation, {
      Entry() {
        return {
          id: "123",
          title: "hello",
          urlKey: "abc"
        }
      }
    })
  })

  relay.mock.queuePendingOperation(EntryListQuery, {})

  const queryReference = loadQuery(environment, EntryListQuery, {}, {})

  render(<RelayEnvironmentProvider environment={environment}>
           <EntryList queryReference={queryReference=} />
         </RelayEnvironmentProvider>
  )

  expect(await screen.getByText(/hello/i)).toBeInTheDocument()
})

```