Apollo GraphQL React - тестирование мутаций с помощью MockedProvider
Я следую документации, предоставленной Apollo GraphQL для тестирования мутаций компонентов React с использованием MockedProvider.
В приложении я использую recompose
styled-components
react
apollo-client
react-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, и я получаю тот же результат (состояние ошибки).