Вы используете фрагменты в своих запросах, не добавляйте Typename - PullRequest
Новая
       39

Вы используете фрагменты в своих запросах, не добавляйте Typename

1 голос
/ 02 октября 2019

Это мой тестовый файл для компонента, который я тестирую. Это дает предупреждение фрагмента и не работает. Я использовал тот же код для другого компонента, где мой запрос использовал не fragment, и он работает. Я не знаю, как протестировать компонент, в котором запрос использует fragment. Я чувствую себя так глупо прямо сейчас. Это моя третья попытка тестирования. __Typename неверно, и я уже проверяю другие ответы. никто из них не поможет мне. React-Apollo тестирование очень сложное: / 

import React from 'react';
import {
  wait,
  cleanup,
  waitForElement,
  fireEvent
} from '@testing-library/react';
import { Route } from 'react-router';
import { customRender } from '../../test-utils/customRender';
import { CategoriesListContainer } from './list/Container';
import { getAllCategoriesQuery } from '../../queries/GET_ALL_CATEGORIES';
import { reorderCategoriesMutation } from '../../queries/REORDER_CATEGORIES';

afterEach(() => {
  cleanup();
  // @ts-ignore
  console.error.mockClear();
});

console.error = jest.fn();

const getAllCategoriesMock = {
  request: {
    query: getAllCategoriesQuery
  },
  result: {
    data: {
      getAllCategories: [
        {
          id: 1,
          name: 'categoryName',
          thumbnail: undefined,
          position: 1,
          active: false,
          created_at: 1,
          updated_at: 1,
          __typename: 'Category'
        }
      ]
    }
  }
};

const reorderCategoriesMock = {
  request: {
    query: reorderCategoriesMutation,
    variables: {
      category_ids: [1, 2]
    }
  },
  result: {
    data: {
      reorderCategories: true
    }
  }
};

describe('Category module testing', () => {
  test('Category List', async () => {
    const { container, getByText, findByText, debug } = customRender(
      <Route path="/">
        <CategoriesListContainer />
      </Route>,
      [getAllCategoriesMock, reorderCategoriesMock]
    );
    const tagName = await waitForElement(() => getByText(`categoryName`));
    const createdAt = await waitForElement(() =>
      getByText(`01/01/1970 05:30:00`)
    );
    expect(createdAt).toBeDefined();
    expect(container).toMatchSnapshot();
    expect(tagName).toBeDefined();
  });
});

Это мой customRender: 

import * as React from 'react';
import { render, cleanup } from '@testing-library/react';
import { MockedProvider, MockedResponse } from '@apollo/react-testing';
import { Router, Switch } from 'react-router-dom';
import { createMemoryHistory } from 'history';

afterEach(cleanup);

export const customRender = (
  node: JSX.Element | null,
  mocks?: MockedResponse[],
  {
    //@ts-ignore
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] })
  } = {}
) => {
  return {
    history,
    ...render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <Router history={history}>
          <Switch>{node}</Switch>
        </Router>
      </MockedProvider>
    )
  };
};
...