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

Question

我正在使用最新版本的 create-react-app(在 package.json 中，“react”:“^17.0.1”)

我正在尝试使用 react-test-library 来测试一个应用程序，其中选中复选框会增加一个计数器。我已将问题归结为我能处理的最 hello-world 形式。我试过 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 时，它应该集中在您期望的点上状态改变。