Блог

Что я пытаюсь сделать?

Использование MockProvider from @apollo/client/testing для макетирования состояния ошибки запроса.

Что я ожидаю получить?

Компонент использует useLazyQuery для запроса чего-либо из серверной части и возвращает error , который запускает компонент для отображения сообщения об ошибке.

Компонент работает так, как ожидалось.

Что на самом деле я получаю?

Ошибка: не перехвачено [Ошибка: больше нет поддельных ответов на запрос … И тест не проходит.

Что я пробовал?

1. Конечное состояние работает так, как ожидалось. Я попытался удалить состояние ошибки в фиктивных данных, все работало как обычно.
2. Я пытался подождать дольше, и это не помогает
3. Я попытался зарегистрировать ошибку в компоненте, я мог видеть ошибку. Похоже, что MockProvider чего-то не хватает, и он выдает ошибку еще до рендеринга компонента
4. Я попытался удалить data часть или добавил ее обратно в макет. Смотрите код ниже

Где ваши коды?

Попробуйте # 1

 const mock = {
      request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },
      result: {
        errors: [new GraphQLError("Error!")],
        data: {
          userGetReferrerFromCode: {
            id: "abc",
            firstName: "Leo",
            lastName: "Qiu",
          },
        },
      },
    };
  

Попробуйте # 2

 const mock = {
      request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },
      result: {
        errors: [new GraphQLError("Error!")],
      },
    };
  

Базовый код

 <MockedProvider addTypename={false} mocks={mocks}>
   ...
</MockedProvider>
  

По опыту я обнаружил, что поле ошибки не обязательно должно быть вложено в результат, чтобы вызвать ошибку.

например

 const mocks = [
    {
        request: { query: GET_REFERRER_FROM_CODE, variables: { input: "edx" } },      
        error: {
            message: "Something went wrong",
        },
    }
];
  

Затем при использовании

 const { loading, data, error } = useQuery(GET_REFERRER_FROM_CODE, {
    variables: { input: "edx" },
});
  

error будет содержать объект из макета.

Если ваш код выполняет несколько запросов (или повторную выборку), вам нужно продублировать свой макет x раз.

Итак, если вы это сделаете query1 , то refetch query1 вам нужно предоставить 2 точно таких же макета, например [mock1, mock1]