时间戳

首页 > 解决方案 > React 测试库：匹配按钮数量

reactjs - React 测试库：匹配按钮数量

问题描述

我使用 create-react-app 创建了一个应用程序。下面是我的计数器组件和测试文件。我正在尝试为组件中的三个静态按钮创建一个测试。第一个测试运行良好，而第二个测试给出了下面提供的错误。

反应组件：

    import React from "react";
    import PropTypes from "prop-types";
    import classes from "./Counter.module.css";
    function Counter(props) {
      return (
        <div className={classes.Wrapper}>
          <div>
            <p>
              Click Counter -  {props.value}
            </p>
          </div>
          <div>
            <button onClick={props.counterIncrement} className={classes.custButton} name="first"> Increment </button>
            {/* <button onClick={props.counterDecrement} className={classes.custButton}> Decrement </button>
            <button onClick={props.resetCounter} className={classes.custButton}> Reset </button> */}
          </div>
        </div>
      );
    }
    Counter.propTypes = {
      value: PropTypes.number,
      clickHandler: PropTypes.func,
    };
    export default Counter;

测试文件：

    import React from 'react'
    import {render, fireEvent, screen, cleanup} from '@testing-library/react'
    
    import Counter from "./Counter";
    
    
    afterEach(cleanup);
    
    describe('Counter', () => {
        test('renders counter value 10', () => {
          render(<Counter />);
          //screen.debug();
          expect(screen.getByText(/Click Counter -/)).toBeInTheDocument();
        })
    
    })
    
    test('renders three buttons', () => {
        render(<Counter />);
        const items = screen.findAllByRole('button');
        expect(items).toHaveLength(3);
      })

错误信息：

FAIL src/components/Counter/Counter.test.js ● 渲染三个按钮 expect(received).toHaveLength(expected) 匹配器错误：接收到的值必须有一个长度属性，其值必须是一个数字 接收到的类型：对象 接收到的值： {} 19 | 使成为（）; 20 | const items = screen.findAllByRole('button'); > 21 | 期望（项目）.toHaveLength（3）；| ^ 22 | }) 在 Object..test (src/components/Counter/Counter.test.js:21:19)*

标签： reactjsreact-testing-library

解决方案

在您提供的示例中，您正在使用.findAllByRole('button')，它返回一个承诺并且需要像这样等待：

test('renders three buttons', async () => {
  render(<Counter />)
  const items = await screen.findAllByRole('button')
  expect(items).toHaveLength(3)
})

另一种解决方案是使用.getAllByRole('button')，在这种情况下，您可以立即断言结果。

推荐阅读