如何使用 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 时，它应该集中在您期望状态发生变化的点上.

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

How to test checkboxes with react-test-library

jsdom

reactjs

jestjs

create-react-app

react-testing-library