Apollo GraphQL React - testing Mutations with MockedProvider - reactjs

Question

I'm following the docs provided by Apollo GraphQL for testing React component mutations using MockedProvider.
In the app I'm using recompose styled-components react apollo-client react-apollo
For testing I use jest and enzyme
I have created mock queries using MockedProvider and tested my component successfully. I cannot, however, get the mutation testing to work properly. My component keeps displaying an error state for the HTML instead of displaying an OK state.
NOTE: Through compose, I compose my <TestKey/> component with handler functions and a loading and error state that will render conditionally.
Following the docs (linked above) I've created a test that looks similar to this:
COMPONENT
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>
)
MUTATION
const CREATEMUTATION = gql`
mutation createKey(
$type: String!
) {
createKey(
type: $type
) {
id
token
type
insertedAt
}
}
`
EXPECTED RETURN FROM MUTATION
const createKey = {
id: '4',
token: 'ucf345',
type: 'public',
insertedAt: '2018-06-20 20:42:15.189925',
}
TEST
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 RETURNS THE FOLLOWING IN THE TERMINAL
(it displays what's rendered when my component receives an error from 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' ]
]
I've tried this using Enzyme's mount instead of React's Test renderer and I get the same result (an error state).