如何使用react-test-library测试复选框

Question

我正在使用最新版本的 create-react-app （在 package.json 中，“react”：“^17.0.1”）

我正在尝试使用react-test-library来测试一个应用程序，其中检查复选框会增加计数器。我已将问题归结为我能处理的最简单的形式。我试过 keyDown，点击...

文本需要 '2' 并收到 '0' ：

组件文件：

import React, { useEffect, useState  } from "react";

function App3() {
  const [counter, setCounter]= useState(0);
  const handleClickInCheckbox = (ev) => {
  setCounter(2)
  };

  return (
    <div className="App">
      <input type="checkbox" onChange={handleClickInCheckbox} id="chkbx" data-testid="ch1" ></input>
      <h1 data-testid="h1" >{counter}</h1>
    </div>
  );
}

export default App3;

测试文件：

import React from 'react';
import { render, act,  screen, fireEvent,  getByRole} from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import App from '../App3'

describe ('app', () => {
      test('checking boxes should increment counter',
      ()=>  {
             act( 
                   ()=>{
                    render (<App /> );
               const ch1 =   screen.getByTestId('ch1')
               const h1 =   screen.getByTestId('h1')
               ch1.focus();
               fireEvent.keyDown(document.activeElement)
               fireEvent.keyDown(screen.getByTestId('ch1'))
                 expect(h1).toHaveTextContent('2');
                 }
                )
             }
 )
})

我尝试使用 jest-environment-jsdom-sixteen，但这不会改变 package.json 中的任何内容：

"test": "react-scripts test --env=jest-environment-jsdom-sixteen",

Answer 1

相关事件是 .click，但您也不应该放弃act整个测试：

describe ('app', () => {
  test('checking boxes should increment counter', () => {
    render(<App />);
    const ch1 = screen.getByTestId('ch1')
    const h1 = screen.getByTestId('h1')
               
    act(() => {
      fireEvent.click(screen.getByTestId('ch1'))
    })
    
    expect(h1).toHaveTextContent('2')
  })
})

在这种情况下，它实际上根本不需要act，因为没有任何异步发生，但是当您确实需要时，act它应该集中在您期望状态改变的点上。