Я использую новые Relay Hooks, и мне трудно пройти тесты. У меня возникла проблема, описанная в их документации.

Если вы добавите console.log до и после usePreloadedQuery, попадет только вызов «до»

//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()
})
//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 }
//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 }

Я обнаружил, что вызывается loadQuery, однако ничего, что я console.log в queueOperationResolver не появляется. И если я добавлю console.log перед usePreloadedQuery, он выведет, а после - нет. Таким образом, похоже, что EntryList приостанавливается, и запрос никогда не разрешается.

Я обнаружил, что если я изменю тест на приведенный ниже, он также не вызовет никаких ошибок, похоже, что queueOperationResolver никогда не будет вызван.

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

Когда я console.log queryReference в EntryList перед кодом usePreloadedQuery, он выводит объект, подобный приведенному ниже. Итак, я знаю, что запрос передается правильно.

{
      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)]
        },
        ...

Обновить

Я обнаружил, что следующие тесты работают, так что это означает, что я что-то делаю неправильно, пытаясь имитировать запрос в компоненте, который использует useQueryLoader.

//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()
})
2
Charklewis 3 Апр 2021 в 09:45

2 ответа

Лучший ответ

Мне удалось пройти тест с помощью следующих тестов, однако я не считаю, что использование шпиона - лучший подход.


import { screen, render } from "@testing-library/react"
import { loadQuery, RelayEnvironmentProvider } from "react-relay"
import { createMockEnvironment, MockPayloadGenerator } from "relay-test-utils"

//this is only used for the spy
import * as reactRelay from "react-relay/hooks"


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 mockLoadQuery = loadQuery(relay, EntryListQuery, {}, {})

  const useQueryLoaderSpy = jest.spyOn(reactRelay, "useQueryLoader").mockReturnValueOnce([null, mockLoadQuery, jest.fn()])

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

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

  useQueryLoaderSpy.mockRestore()
})
1
Charklewis 4 Апр 2021 в 03:18

Благодаря OP и официальным документам у меня все заработало. Мой последний код выглядит так:

import React, { ReactNode, Suspense } from "react";
import { act, render, RenderAPI } from "@testing-library/react-native";
import {
  createMockEnvironment,
  MockPayloadGenerator,
  RelayMockEnvironment,
} from "relay-test-utils";
import { loadQuery, RelayEnvironmentProvider } from "react-relay";
import Component from "../../src/components/Component";
import compiledQuery, {
  ComponentQuery,
} from "../../src/components/__generated__/Component.graphql";

type RenderWithProps = {
  environment: RelayMockEnvironment;
};

const renderWith = ({ environment }: RenderWithProps): RenderAPI => {
  const wrapper = ({ children }: { children: ReactNode }) => {
    return (
      <RelayEnvironmentProvider environment={environment}>
        <Suspense fallback={<View></View>}>{children}</Suspense>
      </RelayEnvironmentProvider>
    );
  };
  const queryRef = loadQuery<ComponentQuery>(
    environment,
    compiledQuery,
    {
      id: "testId",
    }
  );
  return render(<Component queryRef={queryRef} />, { wrapper });
};

describe("Component", () => {
  it("renders", async () => {
    jest.useFakeTimers();
    const environment = createMockEnvironment();

    environment.mock.queueOperationResolver((operation) => {
      return MockPayloadGenerator.generate(operation, {
        DataType() {
          return {
            edges: [
              {
                node: {
                  name: "hello",
                },
              },
              {
                node: {
                  name: "world",
                },
              },
            ],
          };
        },
      });
    });

    environment.mock.queuePendingOperation(compiledQuery, {
      // these variables need to be identical to the variables used in loadQuery
      id: "testId",
    });

    const { getAllByTestId, getByText } = renderWith({ environment });
    act(() => jest.runAllImmediates());

    expect(getAllByTestId("list-item").length).toBe(2);
    getByText("hello");
    getByText("world");
  });
});
0
Joey Gough 21 Окт 2021 в 23:37