reactjs - Jest/React 测试库 : Is it Possible to Spy on and Wait GraphQL Queries as with Cypress?

Question

我的大部分测试经验都是在 Cypress 上进行的。我正在尝试使用 React 测试库(以下称为“RTL”)测试一些 React 组件。我想知道是否可以应用我在 Cypress 中使用的一些技术。

我的(网络)应用程序有一部分显示来自数据库的搜索结果表。搜索 API 以 GraphQL 实现。我们在前端使用 Apollo。可以针对 <FilterCheckbox/> 过滤搜索成分。它包括四个复选框和一个“全部清除”按钮。复选框状态存储在 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)
  })
})

测试通过了，但只有当我任意延迟 500 毫秒时，第二个测试才会通过。如果没有它，当 expect() 时，复选框仍处于默认状态。叫火。

如果这是 Cypress 测试并且 onClick 称为 REST API，我会执行以下操作:

cy.server()
cy.route('POST', '/foo/bar/v2', '@someAliasedFixture').as('fooBar')

cy.get('.my-button')
.click()
.then(() => {
    cy.wait('@fooBar')
    // continue test here as we know that the call completed
})

是否可以使用 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 来测试这个吗？

根据我看过的示例，正​​统方法似乎是将点击处理函数作为 prop 传递，并 expect()它.toHaveBeenCalled()叫。

这是正确的吗？这对我来说似乎是错误的。我的组件不是导致 onClick 处理程序响应单击事件而触发的原因。 React.js 使这一切成为可能。检查foo()单击 <MyComponent onClick={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()
    })
  })

Answer 1

我同意，您应该像真实用户一样进行测试，因此您绝对应该测试复选框是否处于正确状态，而不是测试单击处理程序是否被调用。这就是促进react-testing-library的原因。

你确定吗？

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

我从未使用过这个，但阅读文档时我不确定这是否可以完成这项工作( https://jestjs.io/docs/en/expect#tohavepropertykeypath-value )。事实上我不明白它是如何工作的。

您是否考虑过使用 https://github.com/testing-library/jest-dom ，特别是https://github.com/testing-library/jest-dom#tobechecked ？