Reactjs Jest/React测试库：是否可以像Cypress一样监视和等待GraphQL查询？

我的大部分测试经验都与Cypress有关。我试图用React测试库（以下简称为“RTL”）测试一些React组件。我想知道我是否可以将我使用的一些技术应用于Cypress

我的（web）应用程序中有一个部分显示数据库中的搜索结果表。搜索API是在GraphQL中实现的。我们在前端使用阿波罗。搜索可以针对

组件进行过滤。它包括四个复选框和一个“全部清除”按钮。复选框状态存储在Apollo缓存中

我正在为这个组件编写规范。我希望测试前两个复选框是否默认选中，以及单击“清除过滤器”是否取消选中所有复选框。我有以下资料：

import React from 'react'
import FilterCheckboxes from './FilterCheckboxes'
import { render, fireEvent } from 'Utils/test-utils'

import {
  getByText,
  getByTestId
} from '@testing-library/dom'

const props = {
  options: [
    { label: 'new', value: 'FRESH' },
    { label: 'active', value: 'ACTIVE' },
    { label: 'closed', value: 'CLOSED' },
    { label: 'removed', value: 'ARCHIVED' },
  ],
  statusArray: [
    'FRESH',
    'ACTIVE',
  ],
  cacheKey: 'status',
}

describe('FilterCheckboxes component', () => {
  const { container } = render(<FilterCheckboxes {...props} />)

  const checkNew = getByTestId(container,'checkbox_new')
    .querySelector('input[type="checkbox"]')

  const checkActive = getByTestId(container, 'checkbox_active')
    .querySelector('input[type="checkbox"]')

  const checkClosed = getByTestId(container,'checkbox_closed' )
    .querySelector('input[type="checkbox"]')

  const checkRemoved = getByTestId(container, 'checkbox_removed')
    .querySelector('input[type="checkbox"]')

  const clearButton = getByText(container, 'clear status filters')


  it('should render the checkboxes with the correct default state', () => {
    expect(checkNew).toHaveProperty('checked', true)
    expect(checkActive).toHaveProperty('checked', true)
    expect(checkClosed).toHaveProperty('checked', false)
    expect(checkRemoved).toHaveProperty('checked', false)
  })

  it('Should clear all checkboxes when clear filters is clicked', () => {
    fireEvent.click(clearButton)
    setTimeout(() => {
      expect(checkNew).toHaveProperty('checked', false)
      expect(checkActive).toHaveProperty('checked', false)
      expect(checkClosed).toHaveProperty('checked', false)
      expect(checkRemoved).toHaveProperty('checked', false)
    }, 500)
  })
})

可以用Jest/RTL/GraphQL/Apollo做这样的事情吗

更新： 今天早上又看了一眼。似乎

waitFor（）

是用于异步场景的函数。然而，如果我这样做

it('should deselect checkboxes when Clear Filters is clicked', async () => {
  fireEvent.click(clearButton)
  waitFor(expect(checkNew).toHaveProperty('checked', false))
})

它只是失败了，因为复选框仍然处于选中状态。肯定有办法用RTL来测试这一点吗

根据我所看到的示例，传统的方法似乎是将click handler函数作为prop传递，并调用

expect（）

it

对吗？我觉得这是不对的。我的组件并不是让onClick处理程序响应单击事件的原因。React.js实现了这一点。检查单击
时是否调用了
foo（）
，并不是在测试我的代码是否有效。测试React.js是否有效

解决了
感谢@flo：

  it('should render the checkboxes with the correct default state', () => {
    expect(checkNew).toBeChecked()
    expect(checkActive).toBeChecked()
    expect(checkClosed).not.toBeChecked()
    expect(checkRemoved).not.toBeChecked()
  })

  it('should deselect checkboxes when Clear Filters is clicked', async () => {
    fireEvent.click(clearButton)
    waitFor(() => {
      expect(checkNew).not.toBeChecked()
      expect(checkActive).not.toBeChecked()
      expect(checkClosed).not.toBeChecked()
      expect(checkRemoved).not.toBeChecked()
    })
  })

我同意，您应该像真正的用户一样进行测试，因此您应该明确地测试复选框是否处于正确的状态，而不是测试是否调用了单击处理程序。这就是react测试库的改进之处

你确定吗

expect(checkNew).toHaveProperty('checked', false);

我从来没有用过这个，但在阅读文档时，我不确定这是否能起作用（）。事实上，我不明白它是怎么工作的

你是否考虑过使用，尤其是
 yasSSSS？成功了！非常感谢你！现在我可以享受我的星期天了。你就是那个家伙，伙计！太好了：）。星期天快乐！
expect(checkNew).toHaveProperty('checked', false);