7

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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ruffeng
  • 537
  • 7
  • 23
  • 1
    Quick follow up on this topic: I didn't find a solution. I decided to isolate the Component and once the data is received, call the main component, sending the mutation through props. Could be nice to see someone solving this issue, though. – Ruffeng Apr 30 '19 at 10:33

0 Answers0