I need to know how to use it with urql

[kazu-2020]

Todo

I would like to confirm that the test I am implementing works with the following configuration. 🙏🏻

• msw: ver 0.3.8
• urql: ver 2.1.3
• graphql-code-generator
• testing-library/react-hooks: ver7.0.2
• vitest: 0.4.1

Problem

The return value is undefind

My code

query EmployeesBelongingToGroup($groupId: ID!) {
  employeesBelongingToGroup(groupId: $groupId) {
    id
    email
    name
    image
    belongings {
      id
      belongingType
      belongingId
    }
  }

request handler fow msw

// src/mocks/handlers.ts
import type {
  EmployeesBelongingToGroupQuery,
  EmployeesBelongingToGroupQueryVariables,
} from '@generated/graphql'
import { anEmployee } from '@generated/graphql-mocks'
import { graphql } from 'msw'

export const handlers = [
  graphql.query<
    EmployeesBelongingToGroupQuery,
    EmployeesBelongingToGroupQueryVariables
  >('EmployeesBelongingToGroup', (req, res, ctx) => {
    const { groupId } = req.variables

    return res(
      ctx.data({
        employeesBelongingToGroup: [
          anEmployee({ groupId }),  // anEmployee is dummy data
          anEmployee({ groupId }),
        ],
      })
    )
  }),

set up msw's server

// src/mocks/server.ts
import { setupServer } from 'msw/node'

import { handlers } from './handlers'

export const server = setupServer(...handlers)

set up vitest file

// src/test/setup.ts
import '@testing-library/jest-dom'
import { afterAll, afterEach, beforeAll } from 'vitest'

import { server } from '../mocks/server'

beforeAll(() => {
  server.listen({ onUnhandledRequest: 'error' })
  server.printHandlers() // for debug
})
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

custom hooks to be tested

// src/pages/EmployeesSearch/hooks/useFetchEmployees.ts
import { useEmployeesBelongingToGroupQuery } from '@generated/graphql'
import { useEffect } from 'react'

export const useFetchEmployees = (groupId: number) => {
  const [{ data }, refetch] = useEmployeesBelongingToGroupQuery({
    variables: { groupId: String(groupId) },
    pause: true,
  })

  useEffect(() => {
    if (groupId != -1) refetch()
  }, [groupId])

  return [data?.employeesBelongingToGroup]

test file!

import { useFetchEmployees } from './useFetchEmployees'
import { renderHook } from '@testing-library/react-hooks'
import type { FC } from 'react'
import React from 'react'
import { createClient, Provider } from 'urql'

import { useFetchEmployees } from './useFetchEmployees'

const client = createClient({
  url: 'http://localhost:3000/api',
})

export const MockProvider: FC = ({ children }) => (
  <Provider value={client}>{children}</Provider>
)

describe('useFetchEmployees', () => {
  it('returns data when groupId != -1', async () => {
    const { result, waitForNextUpdate } = renderHook(
      () => useFetchEmployees(1),
      {
        wrapper: MockProvider,
      }
    )

    await waitForNextUpdate()

    const [data] = result.current
    expect(data).toBeDefined() // simple test
  })
}

[kettanaito]

Hey, @kazu-2020.

Do you see the list of handlers printed during your test run? If not, your setup file where you call setupServer is not being run—check the setup.

If you see the list of handlers, do you see an error that a certain request is not handled? If yes, then the predicate criteria for your GraphQL query do not match the actual query. Double-check if the query name is correct.

If not, debug the output of URQL during your test run. You can do that via console.log(data) in your useFetchEmployees.ts. What does it print? Does it receive the data at all?

One more thing: certain GraphQl clients are picky when it comes to including client meta data in the response body. Disable MSW and check the shape of the original response from URQL. Does it contain certain properties your mocked response doesn't? Pay attention to things like __typename next to each type in the response JSON.

[kettanaito]

If none of the above help, please create a reproduction repository and open an issue where I could look into it. Thanks.

[kazu-2020]

@kettanaito
Thank you for answer and advice !!

The cause this time was same as what is described in this issue.

So, I was able to solve this problem by adding import 'whatwg-fetch to the same setup.ts as in this example,

[kazu-2020]

#1192 (reply in thread)