如何使用Jest&Enzyme模拟GraphQL查询并设loading为false测试React组件

1. Mock codegen生成的查询Hook #

首先在测试文件中引入codegen自动生成的useSampleQuery，并用Jest mock对应的导入路径：

// 替换为项目中实际的生成文件导入路径
import { useSampleQuery } from 'your/generated/graphql/path'

jest.mock('your/generated/graphql/path')

2. 在测试用例中指定Hook返回值，设置loading为false #

你可以根据测试场景的需要，搭配返回mock数据或者错误对象，分别测试请求成功/失败的非加载状态表现：

测试加载完成+请求成功场景 #

test('组件查询成功时渲染正确内容', () => {
  // 给mock的useSampleQuery指定返回值，强制设置loading为false
  (useSampleQuery as jest.Mock).mockReturnValue({
    data: {
      // 此处mock数据结构要和实际GraphQL查询返回结构完全一致
      sampleData: {
        id: 1,
        content: '测试内容'
      }
    },
    loading: false,
    error: null
  })

  // 渲染目标组件
  const wrapper = mount(<YourTargetComponent />)
  // 执行断言：校验加载状态组件不展示，成功状态内容正常渲染
  expect(wrapper.find('.loading-spinner').exists()).toBe(false)
  expect(wrapper.find('.success-content').text()).toContain('测试内容')
})

测试加载完成+请求失败场景 #

test('组件查询失败时渲染错误提示', () => {
  (useSampleQuery as jest.Mock).mockReturnValue({
    data: null,
    loading: false,
    error: new Error('接口请求异常')
  })

  const wrapper = mount(<YourTargetComponent />)
  expect(wrapper.find('.loading-spinner').exists()).toBe(false)
  expect(wrapper.find('.error-tip').text()).toContain('接口请求异常')
})

注意事项 #

• 如果你需要校验组件传递给查询的参数是否正确，可以添加传参断言：

  expect(useSampleQuery).toHaveBeenCalledWith({
    variables: {
      a: 1,
      b: 2
    }
  })
  

• 建议在每个测试用例执行后清空mock调用记录，避免用例之间互相影响：

  afterEach(() => {
    jest.clearAllMocks()
  })
  

内容的提问来源于stack exchange，提问作者Saumya