MockedProvider от apollo не предупреждает о пропаже - PullRequest
Новая
       6

MockedProvider от apollo не предупреждает о пропаже

0 голосов
/ 06 февраля 2020

Я делаю модульные тесты для компонентов React, используя хуки apollo (useQuery, useMutation), а в тестах я высмеиваю фактические запросы с помощью MockedProvider apollo. Проблема в том, что иногда мой макет не соответствует запросу, фактически сделанному компонентом (либо опечатка при создании макета, либо компонент развивается и изменяет некоторые переменные запроса). Когда это происходит, MockedProvided возвращает NetworkError компоненту. Однако в тестовом наборе предупреждение не отображается. Это расстраивает, потому что иногда мои компоненты ничего не делают с ошибкой, возвращаемой useQuery. Это заставляет мои тесты, которые раньше проходили, внезапно молча проваливаться, и мне трудно найти причину.

Это пример использования компонента useQuery: 

import React from 'react';
import {gql} from 'apollo-boost';
import {useQuery} from '@apollo/react-hooks';


export const gqlArticle = gql`
  query Article($id: ID){
    article(id: $id){
      title
      content
    }
  }
`;


export function MyArticleComponent(props) {

  const {data} = useQuery(gqlArticle, {
    variables: {
      id: 5
    }
  });

  if (data) {
    return (
      <div className="article">
        <h1>{data.article.title}</h1>
        <p>{data.article.content}</p>
      </div>
    );
  } else {
    return null;
  }
}

И это модульный тест, в котором я допустил ошибку, потому что объект переменных для макета равен {id: 6} вместо {id: 5}, который будет запрашиваться компонентом. 

  it('the missing mock fails silently, which makes it hard to debug', async () => {
    let gqlMocks = [{
      request:{
        query: gqlArticle,
        variables: {
          /* Here, the component calls with {"id": 5}, so the mock won't work */
          "id": 6,
        }
      },
      result: {
        "data": {
          "article": {
            "title": "This is an article",
            "content": "It talks about many things",
            "__typename": "Article"
          }
        }
      }
    }];

    const {container, findByText} = render(
      <MockedProvider mocks={gqlMocks}>
        <MyArticleComponent />
      </MockedProvider>
    );

    /* 
     * The test will fail here, because the mock doesn't match the request made by MyArticleComponent, which
     * in turns renders nothing. However, no explicit warning or error is displayed by default on the console,
     * which makes it hard to debug
     */
    let titleElement = await findByText("This is an article");
    expect(titleElement).toBeDefined();
  });

Как я могу отобразить явное предупреждение в консоли?

1 Ответ

0 голосов
/ 06 февраля 2020

Я отправил вопрос Github команде apollo, чтобы предложить встроенный способ сделать это. Между тем, это мое домашнее решение.

Идея состоит в том, чтобы дать MockedProvider пользовательскую ссылку apollo. По умолчанию он использует MockLink, инициализированный с указанными макетами. Вместо этого я делаю пользовательскую ссылку, которая представляет собой цепочку, образованную из MockLink, которую я создаю таким же образом, как это делает MockedProvider, за которой следует ссылка на ошибку apollo, которая перехватывает ошибки, которые могут быть возвращены запросом. и зарегистрируйте их в консоли. Для этого я создаю пользовательский поставщик MyMockedProvider.

MyMockedProvider. js

import React from 'react';
import {MockedProvider} from '@apollo/react-testing';
import {MockLink} from '@apollo/react-testing';
import {onError} from "apollo-link-error";
import {ApolloLink} from 'apollo-link';

export function MyMockedProvider(props) {
  let {mocks, ...otherProps} = props;

  let mockLink = new MockLink(mocks);
  let errorLoggingLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
      graphQLErrors.map(({ message, locations, path }) =>
        console.log(
          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
        ),
      );

    if (networkError) console.log(`[Network error]: ${networkError}`);
  });
  let link = ApolloLink.from([errorLoggingLink, mockLink]);

  return <MockedProvider {...otherProps} link={link} />;
}

MyArticleComponent.test. js

import React from 'react';
import {render, cleanup} from '@testing-library/react';

import {MyMockedProvider} from './MyMockedProvider';
import {MyArticleComponent, gqlArticle} from './MyArticleComponent';

afterEach(cleanup);

it('logs MockedProvider warning about the missing mock to the console', async () => {
  let gqlMocks = [{
    request:{
      query: gqlArticle,
      variables: {
        /* Here, the component calls with {"id": 5}, so the mock won't work */
        "id": 6,
      }
    },
    result: {
      "data": {
        "article": {
          "title": "This is an article",
          "content": "It talks about many things",
          "__typename": "Article"
        }
      }
    }
  }];

  let consoleLogSpy = jest.spyOn(console, 'log');

  const {container, findByText} = render(
    <MyMockedProvider mocks={gqlMocks}>
      <MyArticleComponent />
    </MyMockedProvider>
  );

  let expectedConsoleLog = '[Network error]: Error: No more mocked responses for the query: query Article($id: ID) {\n' +
    '  article(id: $id) {\n' +
    '    title\n' +
    '    content\n' +
    '    __typename\n' +
    '  }\n' +
    '}\n' +
    ', variables: {"id":5}';


  await findByText('{"loading":false}');
  expect(consoleLogSpy.mock.calls[0][0]).toEqual(expectedConsoleLog);
});
...