There's a component which I am using the cache that I created in apollo, stored inside the client
.
At some point, as a callback from an input, I do the following call:
const originalName = client.readQuery<NamesCached>({ query: NamesCached })!.names
this returns directly an array of objects.
However, I do not know how to test this in my component. My first assumption was to mock exclusively the client.readQuery
to return me an array from my __fixtures__
. That didn't work.
Here is my best shot to mock it:
it('filters the name in the search', () => {
jest.doMock('@/ApolloClient', () => ({
readQuery: jest.fn()
}))
const client = require('@/ApolloClient')
client.readQuery.mockImplementation(()=> Promise.resolve(names()))
const { getByPlaceholderText, queryByText } = renderIndexNames()
const input = getByPlaceholderText('Search…')
fireEvent.change(input, { target: { value: 'Second Name' } })
expect(queryByText('Title for a name')).not.toBeInTheDocument()
})
For this test I am using react-testing-library
. This is my best shot so far...
jest.doMock('@/ApolloClient', () => ({
readQuery: jest.fn()
}))
const client = require('@/ApolloClient')
client.readQuery.mockImplementation(()=> Promise.resolve(names()))
It is important that relies on a single IT, not on the top since there are other tests that are using the client and works properly.
With That I could had mocked in the test when invokin client.readQuery()
but then in the component itself goes back to its own original state
My goal
Find a way that the client.readQuery
can be mocked and return the data I am looking for. I thought in mocking, but any other solution that can work for a single or group of tests( without all of them) would be more than welcome.
I tried as well mocking on the top, but then the others are failing and i couldn't reproduce to go back to the real implementation