Apollo GraphQL React - тестирование мутаций с помощью MockedProvider

Я следую документации, предоставленной Apollo GraphQL для тестирования мутаций компонентов React с использованием MockedProvider.

В приложении я использую recomposestyled-componentsreactapollo-clientreact-apolloДля тестирования я использую jest а также enzyme

Я создал фиктивные запросы с использованием MockedProvider и успешно протестировал свой компонент. Я не могу, однако, заставить тестирование мутации работать должным образом. Мой компонент продолжает отображать состояние ошибки для HTML вместо отображения состояния OK.

ПРИМЕЧАНИЕ: через сочинение я сочиняю <TestKey/> компонент с функциями-обработчиками и состоянием загрузки и ошибок, которые будут отображаться условно.

Следуя документации (ссылка выше), я создал тест, который выглядит примерно так:

СОСТАВНАЯ ЧАСТЬ

const Key = ({
  className,
  columns,
  title,
  data,
  type,
  onClick,
  paginate,
  error,
  info,
}) => (
  <div className={className}>
    <div className="tableHeader">
      <h4>{title}</h4>
      <Wrapper>
        <Tooltip
          title={`What are ${title}?`}
          content={[<TooltipContent key={title}>{info}</TooltipContent>]}
          trigger="hover"
          keyid={title}
        />
      </Wrapper>
      <Button type="primary" onClick={() => onClick(type)}>
        <ButtonIcon type="key" />
        Generate New Key
      </Button>
    </div>
    {error && <Alert type="danger">Error: {error}</Alert>}
    {data.length === 0 ? (
      <NoKeys>There are no {title} generated for this account.</NoKeys>
    ) : (
      <Table
        columns={columns}
        data={data}
        defaultSorted={[
          {
            id: 'insertedAt',
            asc: false,
          },
        ]}
      />
    )}
  </div>
)

Мутация

const CREATEMUTATION = gql`
    mutation createKey(
      $type: String!
    ) {
      createKey(
        type: $type
      ) {
          id
          token
          type
          insertedAt
        }
      }
`

ОЖИДАЕМЫЙ ВОЗВРАТ ОТ МУТАЦИИ

const createKey = {
  id: '4',
  token: 'ucf345',
  type: 'public',
  insertedAt: '2018-06-20 20:42:15.189925',
}

ТЕСТОВОЕ ЗАДАНИЕ

describe('Create Key', () => {
    let tree

    beforeEach(async () => {
      const mockedData = [{
        request: {
          query: CREATEMUTATION,
          variables: { type: 'public' },
        },
        result: {
          data: {
            createKey: createKey,
          },
        },
      }]

      tree = renderer.create(
        <MockedProvider mocks={mockedData} removeTypename={true}>
          <ThemeProvider theme={theme}>
            <TestKey />
          </ThemeProvider>
        </MockedProvider>
      )
    })

****at this step in the test I should be able to call on the button in the component and trigger a click that calls the mutation****
    it('check', () => {
      //errors because it cannot find button
      const button = tree.root.findByProps({type: 'primary'})

      console.log(tree.toJSON().children);
    })
  })
})

CONSOLE.LOG ВОЗВРАЩАЕТ СЛЕДУЮЩУЮ В ТЕРМИНАЛЕ (отображает, что отображается, когда мой компонент получает ошибку от GraphQL)

[ { type: 'div',
        props: { className: 'sc-bwzfXH kIOmnc' },
        children: 
         [ [Object],
           'Error connecting to the Platform. Wait for a second and then click the retry button below' ] 
]

Я попробовал это, используя монтирование Enzyme вместо React's Test, и я получаю тот же результат (состояние ошибки).

0 ответов

Другие вопросы по тегам